ServisBOT Documentation > Bot Tutorials > Filter Page Event Bot

Filter Page Event Bot

Using filter and action flow workers it is possible create an experience where a bot sends a message to a user in response to some sort of action taken on a website. This can be done by sending page events and setting up filters for them in a filter worker.

In this tutorial we will

Use a blueprint to create a basic page event bot
Customize that blueprint to be able to handle additional messages
Use advanced context sharing to change logic in our action flows

Create the bot from blueprint

The easiest way to get started with page events is to see them in action after building a bot from our blueprint.

1: Go to the Bot Army tab and click on Create Bot and then click From Blueprint

2: Select the Filter Page Event Bot

Give the bot a name i.e. Page Event Test
Enter a brief description in the description
Under The Filter Worker configuration

Enter Hello from my filter worker in the Send Something Event
Enter Hello from my action flow in the Trigger Flow Event

3: Click Create once done configuring.

If building was successful, click Test.
We will come back to this area later.

Testing your bot

This bot is different from other ones in that it is only programmed to respond to events from the page. You can see this working from the bot test page by using the Page Events section.

Test out basic events

A basic event is simply calling an “alias” to a page event and has a very simple payload.

Make sure the text field has the text send-something
Click Send Event
The bot should respond with what we configured for the Send Something Event

Test advanced events

The filter worker is also configured to respond to a more advanced page event with additional data. Advanced events take a JSON object.

Click on the Advanced Events button
Ensure that the following code is in the Page Event Context Field

{
	"alias":"trigger-flow",
	"body":{
		"name": "steve",
		"some": {
			"data": {
				"stored":"here"
			}
		}
	}
}

Click the Send Event Button
You should get the response you configured for Send Something Flow when building the bot.

Using Page events

Page events are notifications sent into the bot from the host page. To send an event to a bot you have installed on your web page you call the pageEvent() function.

ServisBotApi.pageEvent('my-alias');

Expand your bot

This bot can only understand page events out-of-the-box, but it is possible to easily expand it.

1: Navigate to your Bot Army

2: Click on your Bot. You will see that the bot currently contains only a filter worker, default endpoint, and one action flow

3: From the bot detail page, under the Resources tab, click Add Resource

4: Select a Flow Based Worker

5: Give it a name and description and click Finish

6: You should see a flow worker card now added to your bot.

When testing your bot, you should now be able to send it either basic text messages, or page events

It is possible to trigger advanced logic by using context data in a page event. This bot is already configured to guide someone to some documentation on ServisBOT accounts when some context is set.

Three things are needed to make use of context from an event

A filter worker with an event
An action flow that will be triggered from that event
Javascript on the host page that triggers the page event with additional data.

Triggering the event

Set the additional data when creating the event to send to the bot.

let event = {
	"alias":"trigger-flow",
	"body":{
		"nextcontent": "account",
		}
	}
};

Call the pageEvent() function with your event

ServisBOT.pageEvent(event);

Then the filter worker picks up that event and sends it to the configured action flow.

{
  "alias": "trigger-flow",
  "actions": [
    {
      "type": "flow",
      "value": {
        "type": "r2-avalanche-worker",
        "deferRelease": true,
        "id": "d2ccd1dc-3c51-4ec1-be29-bf6588602b48"
      }
    }
  ]

The data in body will be available in msg.payload.user.context

Get More Advanced

Use the CLI to download your bot and see how everything is configured.