Activechat Manual
  • What is Activechat?
  • New? Start here
    • The basics
    • Set up your first project
    • Install the chat widget
    • Upload the knowledge
    • Explore the CRM
    • AI-assisted live chat
      • How to set context for AI hints
    • Live chat mobile app
    • Build your first automation
  • Conversational AI
    • For Customer Service Teams
    • For Product Managers
    • For Innovation Teams
    • For Marketers
    • For e-commerce
    • For developers
  • Help Guides
    • Setting up your team
    • Managing conversations
      • Customer attributes
      • User tags and segments
      • Searching for specific users
      • Agent tags (live chat groups and queues)
      • Triggering live chat sessions from the bot
      • Notifications with the TRIGGER block
    • Managing knowledge
      • Uploading business data
      • Question answering and live chat hints
      • Fine-tuning the large language model
    • Natural language automation
    • Building automations visually
      • Customizing your welcome message
      • Adding new skills
      • Navigating skills
      • Copying skills and blocks
      • Handling errors
    • Improving your virtual agent
    • Using live chat AI hints
    • Customizing automatic website page messages
    • Tracking website actions
    • Facebook Ads automation
      • How to set up a Facebook ads bot
      • How to use buttons and quick replies in a Facebook ads chatbot
    • Lead generation
    • Zapier integrations
    • Customizing your project
      • How to customize the chat widget
      • How to customize the Facebook chat widget
      • How to change bot settings
    • Pricing guide
  • Fundamentals
    • Terminology
      • Intents and entities
      • Contexts
      • Skills and events
        • Built-in system skills
          • /start
          • /default
          • /_default_fallback
          • /_start_live_chat
          • /_page_visit
          • /_error
      • Conversation elements
        • Messages
        • Buttons
        • Quick replies
        • Galleries / carousels
    • Messaging channels
      • Website chat widget
        • Installation
        • Customization
        • Voice input
      • Chat widget landing page
      • Facebook Messenger
        • Connect your page
        • 24 hour rule
        • Message tags
        • Persistent menu
      • Telegram
      • Email
      • Twilio SMS automation
    • Intents and bot skills
    • Conversation insights
    • Grow tools
      • Landing pages
      • Messenger links and QR codes
    • Broadcasting
  • Visual builder reference
    • Sending messages
      • TEXT
      • LISTEN
      • IMAGE
      • MEDIA
      • GALLERY
      • FILE
      • EMAIL
      • SMS
      • LEAD
    • Triggering events
      • SEND
      • CATCH
      • TRIGGER
      • LIVE CHAT
    • Manipulating data
      • DATA
      • ADD TAG
      • REMOVE TAG
      • JSON
      • STATUS
      • VALIDATION
    • Conditional logic
      • SWITCH
    • Timers and delays
      • TIMER
      • WAITFOR
      • WAITUNTIL
    • E-commerce blocks
      • CATEGORY
      • PRODUCT
      • VARIATIONS
      • SIMILAR
      • UPSELLS
      • CROSSSELS
      • Shopping carts
        • ADD TO CART
        • UPDATE CART
        • SHOW CART
        • CLEAR CART
        • CREATE ORDER
    • Natural Language
      • NLP
    • System attributes
    • System events
  • Integrations
    • Google services
      • Connect your Google account
      • Google Sheets
        • Searching and updating Google Sheets data
        • Building galleries with Google Sheets data
      • Google Calendar
        • Searching for events
        • Creating and updating events
    • Shopify
    • WooCommerce
    • Dialogflow
      • Building an agent
      • Using entities
      • Slot filling
      • Context management
      • E-commerce NLP
Powered by GitBook
On this page
  • Shopify chatbot
  • WooCommerce chatbot

Was this helpful?

  1. Visual builder reference
  2. E-commerce blocks

CATEGORY

PreviousE-commerce blocksNextPRODUCT

Last updated 3 years ago

Was this helpful?

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.

Shopify chatbot

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 calls them):

We’ll start by displaying the list with the 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:

It seems like that doesn’t make much sense since we do not provide any controls for this gallery, and the user cannot do anything useful with these pretty cards. So, let’s add some controls!

3. Click the “plus” sign in the block editor and add a button or two. We’ll add the “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 the 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 attributes help with it.

As a result of adding the button you’ll see this:

Much better! Now we have details about the 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 the user is pressing buttons on the CATEGORY block:

  • $_selected_category_id – numeric ID of selected category in your shop

  • $_selected_category_title – name (title) of the selected category

  • $_selected_category_slug – URL-friendly category name used by Shopify and WooCommerce

Let’s get to sub-categories now!

WooCommerce chatbot

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 the $_selected_category_id system attribute in the settings for the second CATEGORY block. This variable will be updated every time the user is clicking the button in the dynamic gallery, and the bot will be able to display correct sub-categories based on their value.

Here’s what it looks like in the Messenger:

Finally, it looks like we’ve managed to put the whole category tree from the online shop into an e-commerce chatbot with just six blocks in Activechat! Time to get to products and start selling!

Let’s switch to to demonstrate that the 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).

What happens if there are no sub-categories in the category that the user selects? A run-time error will happen, and control will be sent to the “ERROR” exit from the block. We connect a simple text block there to display the error, and it’s possible to do more complex in a real bot.

WooCommerce
error handling
Shopify
Displaying Shopify products category in the chatbot