How to customize website page messages

Activechat makes it easy to build a website chatbot with customized messages for every page of your website. That’s the power of conversational marketing – the ability to start engaging conversations that are highly personalized.

You can set up basic website messages in the “Website messages” menu of the Bot builder, but you’re quite limited in what you can do there. It’s just a single message per page (up to 10 pages) with an optional URL or event button. Advanced chatbot builders will definitely want to customize this further – tracking the time spent on the page, starting whole chatbot skills on page visits, etc. So, it’s time to switch to the visual builder!

Switching to the visual builder

Go to the “Website messages” section in the “Bot builder” menu and toggle the switch to enable the visual builder.

Enabling the visual builder for website chatbot messages
Enabling the visual builder for website chatbot messages

Keep in mind that you can always revert back to standard website messages setup by clicking the “Restore skill” button.

When you have Activechat pixel installed on your website, the “_page_visit” system event will be triggered every time when the user is visiting any page of your website. The address and title of the visited page will be available in the $_last_page_visit_title and $_last_page_visit_url system attributes.

So, let’s open “_page_visit” skill in the visual builder (you can use the link in the “Website messages” menu or find it in the visual builder tabs) and start customizing!

Customizing the “_page_visit” skill

Building the “_page_visit” skill to send custom messages from website chatbot is similar to customizing keyword replies with the “default” skill – you use the same SWITCH block, checking the value of $_last_page_visit_url attribute to branch the conversation accordingly. Let’s start with a simple example first.

When you open the “_page_visit” skill for the very first time, don’t be confused by the number of blocks there. It’s necessary to make simplified “Website messages” menu work, but once you decide to use a visual builder instead, you can delete almost everything there.

Don't panic! You can remove that tech chatbot stuff and start fresh
Don’t panic! You can remove that tech chatbot stuff and start fresh

Zoom the canvas out to approximately 40-45% and delete every block except the first four (hint: hold down keyboard Shift while dragging around blocks with the mouse to select multiple blocks at once and then hit “Delete” or “Backspace”). Here’s what should be left on canvas:

A fresh start with the "_page_visit" skill
A fresh start with the “_page_visit” skill

Note the use of SWITCH and DATA blocks here. The first SWITCH is checking the value of the $___page_visits attribute and proceeds to another SWITCH (checking the “muted” status) if it’s equal to 1. Otherwise, the DATA block is setting its value to 1 and then the SEND block is triggering the “start” skill. This is a simple logic that implements the default website chatbot behavior – display welcome message first (when a new user is visiting your website) and display page-specific messages on consequent visits. You can change this too and start your website chatbot straight from the page-specific message – just remove these three blocks to and connect CATCH for the “_page_load” event directly to your next blocks. Please keep in mind that this change will affect the website chat widget only – Facebook Messenger widget will be starting with a welcome message anyway, due to Facebook’s policies.

The second SWITCH is checking the value of the $_muted system attribute to see if the bot is muted for the current user. If it’s true, the bot does nothing, otherwise, we’re good to proceed to our custom website chatbot messages.

Triggering different chatbot skills on specific pages

Let’s start with a simple example first. We’ll use the SWITCH block to check the value of the $_last_page_visit_url attribute and based on this we’ll be launching different chatbot skills on “About us”, “Services” and “Portfolio” pages of our website. For every other page, the chatbot will remain silent until the user types a message in the chat – then the “default” skill will be triggered.

A simple example of website chatbot running different skills on different pages
A simple example of website chatbot running different skills on different pages

Please note that the “_page_visit” event is triggered on EVERY visit to the web page. If your visitor clicks F5 to reload the page, this event will be triggered again. If the user visits page A, then goes to page B and then returns back to page A, “_page_visit” will be triggered twice on page A.

This can make chatbot behavior a little bit annoying, so you (as a seasoned conversational designer) will definitely want to customize this further. Let’s do it!

Advanced website chatbot with complex conversational logic

Here’s what we will be building now:

  • Website chatbot will send customized page-specific messages only after the user spends a certain amount of time on the page
  • One message will be sent to the same user only once in the 24-hour interval
  • We’ll be counting the number of times a user visits pages that interest us most, and once the number of visits exceeds 3 we’ll tag this user with a “frequent_visitor” tag and display a different message

To achieve this, we’ll build separate skills for different pages on the website. Let’s call these skills “page_services”, “page_about_us” and “page_portfolio”. Then, we’ll use a SWITCH block to decide which skill to launch on a new page visit.

But first, we need some preparations in the “_page_visit” skill to implement our conversational logic.

Advanced _page_visit skill for a sophisticated website chatbot
Advanced _page_visit skill for a sophisticated website chatbot

What’s going on here? When the “_page_visit” event happens, the skill starts and immediately sends another event, “reset_page_timers”. We’ll need this event later, in the page-specific skills, to stop timers that count time spent by the user on the page.

Next, we use the SWITCH block to see if $seen_before user attribute is set to true. If it’s not, that means that the skill is being run for the very first time for that user, so we proceed to some data manipulation – four DATA blocks below will set initial values of page counters ($page_visits_about_us, $_page_visits_portfolio and $page_visits_services) to zero. Later, in page-specific skills, we’ll be incrementing these values to see which pages our website chatbot user is visiting.

After this, we continue to the SWITCH block, checking the value of the $_last_page_visit_url attribute. If this URL contains specific keys (like “/services/”, for example), we’ll use SEND blocks to start our page-specific skills. Please note that we’re using “contains” instead of “is equal to”. Usually, it’s advised to avoid complete URLs in the SWITCH block conditions – this will keep your bot from confusion when $_last_page_visit_url contains complex URLs with extra parameters (for example, UTM labels).

Now, let’s see what’s happening in the page-specific skills.

Custom page-specific chatbot skill with complex conversation logic
Custom page-specific chatbot skill with complex conversation logic

When one of these page-specific skills starts running, we know that the user has just loaded a page on your website. So, first of all, we’ll increment the value of the counter for that specific page with the DATA block. Next, we’ll start the TIMER and set it to run once after 15 seconds – this will delay the execution of the rest of the flow in that skill for 15 seconds.

If the user is leaving the page (clicking the link and navigating to another page) before 15 seconds, we definitely do not want our chatbot to display that page-specific message anymore. So, we’re using the CATCH block to listen to the “reset_page_timers” event that “_page_load” skill will be triggering on every page visit. Once this event occurs, this block will stop the timer.

Otherwise, if it’s 15 seconds and the user is still on the same page, we continue to the SWITCH block to check if the current page message is locked for 24 hours after being shown already (to avoid user annoyance). We use $page_locked_services attribute to track this (for other page-specific skills the name will be $page_locked_about_us and $page_locked_portfolio). If this attribute is set to true, the chatbot will do nothing (since there are no blocks connected to the conditional exit). Otherwise, we’ll use another SWITCH block to check the value of $page_visits_services attribute (remember we’ve increased it by 1 in the very beginning of this page-specific skill?)

If the number of visits is 3 or less, we’ll instruct our bot to start our regular “services” skill (sending an event with the SEND block). If it’s more than 3, the chatbot tag this user with a “frequent_visitor” tag and will display a different message – instead of running our regular “services” skill we’ll be inviting the user to arrange a 1-on-1 call with a sales representative.

And, eventually, after doing this we’ll lock our page-specific skill for 24 hours with the $page_locked_services attribute, setting it to true and launching the TIMER block to set it back to false in 24 hours.

Were you following? Perfect! You’ve just managed to implement complex conversational logic in the website chatbot. But please feel free to contact us if anything is unclear here – Activechat has great flexibility, but it comes with a learning curve.

Was this article helpful to you? Yes 3 No 2

How can we help?