Offering a chatbot is one of a kind experience that attracts website visitors to engage with your brand. Especially when your teams are not available. By building a scenario that triggers automatically every time a page is loaded, companies can build a delightful experience.

This tutorial is set to give you everything you need to create a chatbot scenario so it triggers every time a scrolls on a specific page

To do so, you'll need to have access to the following things:
Google Tag Manager
Crisp JS SDK (available here)
The chatbot plugin (available from the Unlimited plan)

If you don't know how to use our chatbot plugin, I suggest you to have a look at this article first.

What is the event I have to use to start a chatbot scenario ?

The event block lets you kickstart a bot scenario. It's the inbound way to start the chatbot on your website. There are different block within the event blocks. Usually, you'll be using " User Message Matches " event block. The other one is " Crisp event fires " event block.

User Message Matches lets you start a scenario from inbound messages, sent by your leads or customers.
Crisp event fires lets you start a scenario when a user has triggered an event.

For this example, we are going to use the "Crisp event fires" block as we're not looking to wait for the customer to send us a message. But rather, we're looking to be proactive when a user does a specific action on a specific page. Please note that the user email must be set in the conversation.

Crisp event fire examples

As you see here, you have to define an event so it kickstarts the chatbot. The question is: How can I push a user event? Well, we have an article about that.

Make sure to check the article about how to push a user event before going any further through this article

How can I push a user event to kickstart a chatbot scenario?

For this example, we're going to use GTM so we can affect an event to each user that loads a specific page. If you don't know how to use Google Tag Manager, or don't have the possibility to, we suggest you refer this guide to your technical team so they can set this up for you.

Here is an example of an event that you can push through Crisp. This is a simple Javascript command that can be easily executed.

// Feed this call with your own events data.
$crisp.push(["set", "session:event", [[["pricing:page:loaded", {}, "red"]]]])


What are the steps I should follow to push a user event?

Build your trigger in Google Tag Manager

Building a trigger inside Google Tag Manager is easy to do and will let you craft lots of different behavior, here are some examples:
Page view: When a specific page is viewed
Dom ready: When the page is loaded
On a link: When a user click on a link
Scroll depth: When a user has scrolled to a certain depth on your page
Timer: Adds a timer to your page so it triggers when it reach 0

In this example, we're going to add a GTM trigger that will focus on scroll depth on key pages (here, the pricing page but it can be replicated to any of your URL structure).

Step 1: Define your GTM trigger (example below)

Example of a GTM trigger using scroll depth

Step 2: Create your GTM tag (example below)

Example of a GTM Tag using Custom HTML

Step 3: Add the event name in your chatbot scenario (in this exemple, it is "pricing:page:loaded")



Step 4: Add an action block called "Send Message" as a next step (but don't forget the show compose)



We suggest you to add a picker message as it'll automatically offer an action block that will engage website visitors even more. Asking them to click on a button to start the scenario the most efficient way.

Have you been able to create a scenario like this for yourself?

Feel free to get back to us to share your story!
Was this article helpful?
Cancel
Thank you!