Activechat Essentials

E-commerce Chatbots

Advanced Chatbot Tools

Tracking code installation

Tracking page visits

Natural Language Chatbots

Intents and Entities

NLP contexts

Building Dialogflow agent and connecting to Activechat

Sending user input to NLP engine

Triggering bot skills by intents and events

Working with entities

Slot filling

Using contexts

NLP best practices 

E-commerce Chatbots

Shopping cart - adding items, displaying cart

Now we have complete online shop in the chatbot and it’s time to get some shopping cart functionality – so that your users can make real orders. Visual Bot Builder has a set of blocks specifically designed for this, and these blocks are accessible even if you do not have WooCommerce / Shopify or Magento connected, thus allowing you to work with shopping cart even if you manage your inventory manually through galleries.

Our current bot is quite big already (22 blocks and growing), so building a separate skill for shopping cart seems to be a good idea. We’ll start with changing “Show details” buttons that we already have in dynamic product galleries to “Add to cart” buttons that will be triggering our new skill with a SEND event block.

Using ADD TO CART block

Shopping cart is a dynamic gallery, like products and categories. The only difference is that product and categories galleries are populated with items from your online store through API, and shopping cart gallery consist of products that you add manually in your bot flow.

Here is a simple cart management skill that is triggered by addtocart_product event (this event is fired by SEND block from the previous skill).

Notice how we’re checking current number of items in the cart to make sure we do not add more than 10 (that’s a limitation of Facebook gallery). Next, we ask the user the quantity (how many items to add) and put all product details in the ADDTOCART block.

It seems that $_selected_product_id should be enough here, since this ID defines all other product details (title, price, URL etc), but we decided to give you complete control on what to put in product detail fields. This can be handy if you’re using shopping cart functionality without actual store connected through API.

NB Please also note that for Shopify store we’re using $_selected_product_var_ids variable instead of $_selected_product_id that works for WooCommerce. This is due to the fact that Shopify cart accepts only variation IDs, and for products without variations this would be the same as product ID. For products that have variations $_selected_product_var_ids will contain pipe-divided variation IDs for selected product (“1234567 | 9876543 | …”). If you pass multiple variation IDs to the ADD TO CART block, only the first one will be used.

After adding product to the cart we display that cart to bot user with another block.

For products that have variations we need to use exact variation ID when adding product to the cart, so we’ll copyaddtocart_product skill to addtocart_variation skill with a minor change – we’ll replace $_selected_product_id with $_selected_var_product_id and add $_selected_var_title to product title to display it in the gallery. We’ll also change event name in the first CATCH block for this skill to be triggered by addtocart_variation event.

Using SHOW CART block

This is a simple block to display dynamic gallery of items in your chatbot shopping cart. As in every other dynamic gallery you can add up to 3 buttons to each card in this gallery, knowing which card was selected when user is pressing one of these buttons.

Here is the complete list of these variables:

  • $_selected_item_id
  • $_selected_item_slug
  • $_selected_item_price
  • $_selected_item_title
  • $_selected_item_image_url
  • $_selected_item_url
  • $_selected_item_description
  • $_selected_item_quantity

We’ll get back to these variables very soon! Let’s see how the cart that we’ve just built works in messenger.