Sometimes it's helpful to be able to see the widgets operating outside of the context of your specific page and tinker with settings to see how the widgets behave without the complexity of other code, plugins, etc on your real or test page. In this article, I'll walk you through one simple approach to doing this that even the least tech-savvy should be able to follow and implement.
For starters, it may or may not be obvious to you that you need to "host" some pages where the widgets will be loaded in order to test them locally. This can be done in any number of ways but one simple way to do this is to just run them in a simple script-based http server, called, believe it or not, http-server. For the sake of this article, we'll assume you're using a Windows OS, but you can follow a very similar process for any of the other operating systems as well.
The Local Server
Install Node. Download node here: https://nodejs.org/en/. Follow the instructions for your operating system. A fairly simple and non-intrusive install that will allow you to run Node.js apps from the command line as well as a package management tool called NPM.
Next install the http server. You can find instructions here: https://www.npmjs.com/package/http-server.
The gist of the instructions is run the following command from the command line:
npm install http-server -g
Test your install by running the command:
You should see output like:
Available on: http:192.168.12.1:8080 http:127.0.0.1:8080 Hit CTRL-C to stop the server
8080 is the default "port" your server will use. If you need to specify another port you can do this by adding the -port option like this, for example:
http-server -port 8088
Hosting The Sample Pages
By default http-server also serves content from the current directory. Obviously not what we want. But before we fix that, let's create a directory where you can run your widgets. Download the attached zip file. It contains a very simple structure for a 3-page demo that mimics the typical registration flow (login page, registration page, and thank you page). The simple html pages included also use a widget ids from a real InGo event called SampleEvent.
For the sake of our example we'll assume you've downloaded and extracted the content to the c:\temp directory. This will be the location that you want to tell http-server to server from
To run the server and serve the sample event pages, we can run,
http-server c:\temp\ingodemoevent --cors
Now your demo event content is being served locally at http://127.0.0.1:8080/loginpage. Notice that we're also appending the --cors option to allow our demo pages to be a less restrictive with browser cross-domain requests. This can be useful if you'd like to mix in content from your real or test site as well.
Navigating Through The Sample Flow
Navigating to the loginpage via http://127.0.0.1:8080/loginpage, you should see the login widget display. Once you authorize you'll be redirected to a simplistic registration page (which will auto-fill using our registration widget. Finally, by clicking the register button, you will navigate to the "Thank You" page where you will see the social widget.
Oh, and if you missed it, the login page has the default options for Social Network permissions. So if you run through the sample locally without changing those settings and get to the "Thank You" page, you've posted to your Social Network that you're going to the Sample Event. You'll probably want to remove that post. Frist validate that the post was made to your wall, then use the "delete" or "remove" option on the post to remove it.
Post a comment if you find this helpful. If you have trouble using the demo, open a ticket and we'll be glad to help you with it.
A Sample is Worth a Thousand Words. Enjoy!