How to add an image carousel to Dialogflow.
Find out how to add an image carousel to Dialogflow and how to make it appear in your website’s chatbox very easily with Blahbox. In my previous article, I taught you how to link the bot you trained in Dialogflow with your Blahbox account. Now, you’ll learn how to use rich messages in order to improve the communication with your clients.
There are many types of rich messages. The most interesting thing about using them is the added value that they can give to the communication with your clients, making it more fluent and dynamic. Image carousels are one example of these rich messages. By using them, the client can see our product or service directly and choose them in a very easy way.
It’s very easy to add a carousel to Dialogflow and I’ll help you do it with some simple steps:
- In Dialogflow, in the intent you want your bot to answer with a carousel, you need to find the head “Responses”. There, you’ll see the DEFAULT option and, next to it, you’ll find a + sign. Clicking on that sign, you’ll have to choose Google Assistant and here you’ll be able to set up Google Assistant’s rich messages, as in this case we’ll do with the image carousel.
2. Once the Google Assistant tab is added, you have to select “Add responses” and then, “Carousel Card”. There, you can add the links to your images and this will automatically upload the image you want to add to your carousel. You’ll do this with every image you want to add. I uploaded two images and it looks like this:
3. Once you upload all your images, don’t forget to click on SAVE. And now, we go to Blahbox website to see how our carousel looks like in the chat box.
4. Once in Blahbox, we’ll go to the Project where we added the carousel. We click on the Settings icon (the gear on the left-side menu):
5. Here we can find many options to customize our chat, from the avatar of our bot to the color and shape of the speech bubbles. So, in case you haven’t customized your chat yet, this is the moment to do it.
6. On the right-side of the screen, where it says Preview, we’ll be able to test our carousel by telling the bot some phrase that we’ve chosen in the intent. In my case, I added a carousel of pizza flavors. So, when I tell my bot ‘I wish to order a pizza’, it will ask me which flavor I would like it to be and will show me the image carousel.
7. As you can see, adding the carousel to Dialogflow makes it appear automatically in Blahbox and, consequently, in your website. It’s very simple! An option that Blahbox gives us and that we can take advantage of is the possibility of changing the width and height of our chatbox. If we use a response with a carousel, a good option is to make our chatbox bigger so our client can see our images more clearly. Below, you’ll be able to see how I made my chatbox bigger so the images are better appreciated:
And that’s it! You are now using a type of rich message that will make the communication with your client more fluent thanks to Blahbox, which makes it possible to apply those changes to your website automatically. You can go to Blahbox website clicking here and find out about all the functions they offer and take advantage of them.
I hope this article can help you and that conversations with your clients get more dynamic from now on with this interesting tool.
