Advanced Action Flows 5. Changing content on a 2nd screen based on visitor

multiple screens action flows

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.

The idea of the demo is to show different advertisements on the screen for two different visitors, who arrive in the area in turns. Therefore you need two different mobile devices to test the full functionality. In this example, we use the anonymous visitor IDs to distinguish between the two devices. In real life, you might want to use the tag function to separate your audiences.
The action flow includes both the client side (checking who is in front of the screen and sending the info the the website) and the server side (where this website is created). In order to test and deploy this setup, you need to use a website which is lacking authentication and where you can post your own content as a payload. Do note that in a real-life scenario, you would have to set up at least some level of protection for your project.
The page looks like this at the beginning:
website_gym

Pre-requisite:

  • 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.

action flows 3

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.

Debug
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.

Switch node
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:

get_visitor_id

Add them to your node like this:

two_visitors

Function node
A Function node allows you to use JavaScript to add custom logic which might not be possible with other nodes. In this case we’re are going to display an image from specified URL if there is a Proximity event for the defined visitor id.

For the above example: When the visitor with ID 5e8ec1d4-466b-4e94-b13c-c28aa88c94ac has an proximity event the image

https://proximi.io/demo_assets/img/crossfit_cc.jpg” alt=”Crossfit”

will be displayed.

And for the visitor with ID 148f3530-2cd3-4d53-b8ee-e4648414ef29 will have the image

https://proximi.io/demo_assets/img/discgolf_cc.jpg

displayed on his proximity event.

sending_ads

Inject
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.

Websocket Out
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.

websocket_out

Websocket In
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.

get_websocket

Function #2
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.

create_website

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”.

Deploying the action flow

To test:

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).

About Annina Koskiola

CEO and Co-founder of Proximi.io. Loves exploring new ways for technology to intertwine with our everyday lives. Passion for history, traveling, eating and the Valais Blacknose sheep.