Last updated: 02 May 2023 #
This tutorial will only work for platform-owned channels: Converse, Embedded, and Full page.
This is a 2-for-1 tutorial.
- The first part covers how to get your chatbot to display a different message based on its page URL in the scenario where you use the Converse channel.
- The second part overs how to do this if you are using the Embedded or Full page channel.
The scenario #
You’ve built an excellent chatbot and proudly add it to your website.
It’s got a warm, inviting welcome message that triggers the first time someone opens your chatbot, but…
Well, your welcome message needs to work across all the pages of your website. That’s a lot of pages covering very different topics. Because your chatbot needs to cover all the bases, its welcome message is quite bland.
So, you’ve got an idea: what if I presented a custom welcome message to my users if they land on our pricing page (
)?
This tutorial will teach you how to do exactly that.
Part 1: Converse #
Step 1: Create your generic welcome conversation #
Go to the Builder.
Create a new conversation (or edit your existing welcome conversation).
As the trigger, use
.
Edit your first message and write your copy. Make this version generic enough to work on most pages. Hit Save for now, we will come back to edit this conversation in a minute.
### Step 2: Create your custom welcome conversation
Stay in the Builder and create a new conversation.
As the trigger, use
AND
.
Hit Save and edit your first message. Write the copy you would like your users to see when they open your chatbot on your pricing page.
> You can make clever use of the events inside the
trigger. For example, here we use
but you can also use
,
,
, etc.
Step 3: Edit your generic conversation #
Now that we’ve created our new custom conversation, we need to let our original generic conversation know NOT to trigger if the user is NOT on
.
Easy as pie.
Edit your generic conversation.
Edit the trigger to
AND
.
Hit Save.
All done! Make sure you read our tips below before you go.
Part 2: Embedded or Full page #
If you are using the Embedded or Full page channels, setting this up is a little bit different.
WHY? *(Skip if not interested)*The Converse channel is a widget placed on your website. The widget itself is URL-aware, meaning whenever a user talks to the widget, the widget knows which page this interaction is happening on.
The FULL PAGE and Embedded channels however are wrapped in iframes. These iframes ‘section off’ the chatbot from the page they’re on, meaning it doesn’t know which page it is on as it’s being used.
There are many ways to set this up using our platform. Below is the most straight-forward. If you need more flexibility or help setting a more complex version of this up, please reach out to your account manager.
For the purpose of this tutorial, let’s imagine you are using the Embedded channel. It works the same way using the Full page channel.
Step 1: Add a custom parameter to your chatbot script #
If you are unfamiliar with this, read this tutorial: ADD CUSTOM PARAMETERS TO YOUR CHATBOT SCRIPT
This will be our example Embedded script:
Your custom parameter can be whatever you want it to be. We will use it to identify which page the chatbot is on, so we recommend using a consistent and evident naming convention.
For this example, we’ll imagine we’re setting up this chatbot on multiple landing pages. We’re going to call our parameter
(for landing page).
For the attribute, again, make sure you use a consistent convention. Because we’re using this for landing pages, we will use a unique identifier that relates to the different landing pages we’re setting up. Let’s say we’ve got a blue and a red landing page.
We’ll produce two Embedded script (one for each page):
Blue:
Red:
Step 2: Add your scripts to the pages #
Simply add your scripts to the appropriate pages (blue with blue, red with red). To learn how to do this, please read the following doc: ADD AN EMBEDDED CHATBOT TO YOUR WEBSITE
Step 3: Create your first welcome conversation #
Go to the Builder.
Create a new conversation; we will start with the conversation that will trigger on the red page.
As trigger, use:
AND
.
This does two things:
- It ensures the conversation triggers for new chatbot users.
- It checks the chatbot URL (in this case
https://embed.website.io?c=bots&i=2z3kNZy9Yo&lp=red
) for the
lp=red. If it finds a match, it will trigger this conversation.
You can now edit your first message and write your red chatbot copy.
WHY? *(Skip if not interested)*As mentioned earlier, Embedded and Full page chatbots don’t know which page they’re on. This is why we can’t use the
conditional we used for Converse. Instead, we use
, which is the actual URL of the chatbot, not the URL on which the chatbot is hosted.
In the case of an Embedded (and Full page) chatbot, the
is inside its script.
### Step 4: Create your second welcome conversation
As you may have expected, we need to perform the same tasks for the blue conversation. Follow the exact same steps, except instead of
make sure you enter
.
### Step 5: Avoid conflicts
We now have two conversations, one for each landing page.
The final step of this process ensures there will be no ambiguity when it comes to loading the right conversation. We have, so far, used
. To strengthen this, we will also add on each trigger that
.
Open your blue conversation.
Add a new trigger below the existing two (make sure they’re
) and enter
.
Save, and do the same for the other conversation.
All done!
FAQs #
Can I use this technique to trigger different conversations based on URL? #
Absolutely! Both the approaches above can be used to trigger a conversation based on the page URL. All you need to do is carry on building your conversation after the trigger point.
