This example is more advanced use case and we recommend you to familiarise yourself with less advanced flows before processing this one. The idea of this action flow is to change the content on a second screen based on a visitor. The simplest way to do this is via a website, whose content is changed with a http request call. In testing, this second screen can be your laptop. In real-life scenarios, the second screen could be a tablet or a digital screen.
- Host your own authentication-free website (e.g. Heroku).
- Creation of Places, Floors, Departments, Geofences and two beacons.
- Set up one beacon next to the screen you are using, and another one minimum 5m away from it.
- Define a geofence around each beacon. Make sure the geofences are a good size to trigger both enter and exit events.
- The portal is connected to an app, so that you can actually get some actions flowing, and two mobile devices.
Step 1 : Import the following piece of code into the action flow clipboard from top right corner.
Step 2 : Once the above code is imported the action flow would look like this.
Here’s the full walk-through of each of the steps and what’s happening in the action flows:
Proximi.io Event Receiver
This node listens for visitors entering or exiting any of the defined geofences. When a proximity event occurs, the node get’s triggered and it will pass all the event data as an output payload.
A Debug node can output the whole payload or just the selected properties into the debug tab on the right side of the editor as well as to the browser console. Useful feature to get insights about the things that happen during the action flow execution.
A Switch node can be used to segment the action flow based on the event type, department and a lot of other properties as well. You can check out all the properties from our REST API documentation. In this case we’re reacting only to “enter” events.
Switch node #2
Another Switch node will be used to determine who was the person and who entered the geofence nearby the screen. Add the anonymous visitor IDs for the two devices that you are using in the test. In order to get the IDs, you need to trigger some events (e.g. walking around your defined geofences). Then, go to the Dashboard, and copy the sequence of numbers and letters under the “Visitor” column. See below:
Add them to your node like this:
For the above example: When the visitor with ID 5e8ec1d4-466b-4e94-b13c-c28aa88c94ac has an proximity event the image
will be displayed.
And for the visitor with ID 148f3530-2cd3-4d53-b8ee-e4648414ef29 will have the image
displayed on his proximity event.
The Inject node can be used to either manually or automatically on set intervals to inject payload into the flow. In this case, pressing the button on the left side of the node on the action flow editor view allows you to manually send one of the adverts into the webpage. This function is useful, if you only can use one device, and need to manually reset the flow to test it.
By default, msg.payload will be sent over the WebSocket. The socket can be configured to encode the entire msg object as a JSON string and send that over the WebSocket. In our case the image URL is send as the payload to the Websocket Out node. If the message arriving at this node started at a WebSocket In node, the message will be sent back to the client that triggered the flow. Otherwise, the message will be broadcasted to all connected clients.
By default, the data received from the WebSocket will be in msg.payload. The socket can be configured to expect a properly formed JSON string, in which case it will parse the JSON and send on the resulting object as the entire message. Make sure you change the Websocket listener to the one defined by you. In this case it is /api/ws/simple.
Next we add the function that sets the template for our simple website. This node sets up the website on the server based on the provided template. By default this uses the mustache format, but this can be switched off if required. Here we define the way we want our end webpage to look like.
The last bit of the flow is the Debug node added to the bottom, together with a Websocket In node.
Step 3: Deploying the action flow : You can deploy the action flow from the top right corner of the editor. Usually it’s good idea to select the first option “Full”.
Open the website. Take the mobile devices to the beacon further away from the screen. Take them close to the screen one at a time. You will see the image changing on the screen based on which phone you are bringing close to it.
Not working? Take a look at your dashboard and see if the events are triggering correctly. If not, your geofences may be too small (not able to trigger enter events) or too big (not able to trigger exit events, and thus the image is not changed).