Chatbot education

ūüĎČ Chatbot videos

ūüĎ©ūüŹľ‚Äćūüéď Bot Academy

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 

Adding items and 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.