Tracking code installation
Tracking page visits
Intents and Entities
Building Dialogflow agent and connecting to Activechat
Sending user input to NLP engine
Triggering bot skills by intents and events
Working with entities
NLP best practices
Sending order updates
Now when you’re all set, time to get to the core integration functionality!
In this chapter we’ll be exploring product categories (“collections”) and sub-categories.
To display lists of products and categories in your chatbot Activechat is using dynamic galleries, which are rendered “on-the-fly” when your bot is communicating with the user and do not require manual pre-filling with products/categories.
The building block is called “CATEGORY” and can be found in the toolbar on the left.
1. First of all, let’s start with displaying the list of all available categories in your online shop.
Here is our sample Shopify store with some products grouped into smart and manual categories (“collections”, as Shopify calls them):
We’ll start with displaying the list with CATEGORY block in our Visual Builder, and our first bot will have only 5 blocks.
2. Click “RUN” to compile the bot – and here’s the result in Messenger:
Seems like, that doesn’t make much sense since we do not provide any controls for this gallery, and user cannot do anything useful with these pretty cards. So, let’s add some controls!
3. Click “plus” sign in block editor and add a button or two. We’ll add “Show details” button to display category details (we’ll be adding subcategories in the next exercise).
Note that we connect this button to a text block with some system variables in it. We’ll use these to identify the card that is selected when user is pressing the button.
You can add multiple buttons to dynamic galleries, and each card will have these buttons when the gallery is rendered in real time. How do you know which button on which card was pressed by the user? System variables help with it.
As a result of adding the button you’ll see this:
Much better! Now we have details about category that was selected by the user and can use it in our bot logic.
Here is the list of run-time variables available when user is pressing buttons on CATEGORY block:
Let’s get to sub-categories now!
Let’s switch to WooCommerce to demonstrate that CATEGORY block is working exactly the same there. (Keep in mind that you can have only one shop connected to a bot, so we’ll have to disconnect Shopify store before connecting WooCommerce).
Here is the list of categories and sub-categories in our sample WooCommerce store:
You can see that we have four top-level categories (Uncategorized, Clothing, Decor and Music) and Clothing includes three sub-categories (Accessories, Hoodies and Tshirts).
Let’s jump to Visual Builder and see how we can display these in the chatbot. It looks like the bot should get much more complex? Exactly! We’ll add one more block to the flow 😁
Notice the use of $_selected_category_id system variable in the settings for the second CATEGORY block. This variable will be refreshed every time user is pressing the button in the dynamic gallery, and the bot will be able to display correct sub-categories based on its value.
What happens if there are no sub-categories in the category that user selects? Run-time error will happen, and control will be sent to “ERROR” exit from the block. We connect simple text block there to display the error, and it’s possible to do more complex error handling in real bot.
Here’s how it looks like in the Messenger:
Finally, It looks like we’ve managed to put the whole category tree from online shop in a chatbot with just six blocks in Visual Bot Builder. Time to get to products and start selling!