When it comes to taking advantage of chatbot to the business sector. The highlight of this topic is to collect user data and analyze it to understand user behavior.
In this article, we will get to know the tools of Amity Bots and how to implement the functionality of the chatbot to be able to store user data by using a message type called Image map.
Image map is a type of Line message which can create hot spots on the image and gives them a link or action wanted to show. Generating an Image map is a bit easier than creating flex messages, no coding required.
There are two types of Image map action objects types, url and message, reference is from https://developers.line.biz/en/reference/messaging-api/#imagemap-message
As we all know, Image map buttons are originally not a Postback type, which means the action users click on the image will not be collected. So, If we want to use that data, there is a workaround method to enable the Amity Bots system to collect this data and can be used for further benefit.
First, I would like to introduce the Amity Bots platform, how to create an Image Map by going to the Menu “CONTENT”, select “Templates” and then.
Follow these step:
1. Select “ +TEMPLATE”.
2. Rename it to what you want.
3. +Add Respond.
4. Select Image Map.
5. Browse image.
6. Select the desired area in the image to create an action.
After we created the imagemap, next we will use Entity to capture data from user’s action to the chatbot. Entity functions in Amity Bots can generate Postback button action which can capture the pre-defined Postback message. When the chatbot receive event from the user clicking on the created imagemap, the data will be stored in the database for further usage in the chat journey.
Next, we’re going to connect imagemap with Entity. To add properties to imagemap to store values like Postback Entity.
Steps to follow :
1. From Entity create one with options that you want to use in imagemap.
2. Create imagemap and map the actions with the options that have been created in the entity.
3. Setting Amity module in Amity Bots Platform
3.1 Module: Chatlogic
Chatlogic module provides you the tools for creating conversation journey. Now we will use “Entity” node from the left node panel by dragging the node to the working panel, double clicking on it, you will see the adjustment panel. put the keyword in the Question field as the keyword. That keyword should be unique. Here we use “$ # $ =” followed by the name of the template we created.
3.2 Module: Messagelogic
Messagelogic module provides you tools to connect your chatbot with chat channel. You can integrate your chatbot response through the API provided from those channel you want to use. From this case we can customize imagemap to have a Postback action format.
So we will convert the output to a Postback action format according to the message API template.
When a chat channel receives a message object sent by the bot system we will receive imagemap message like the image below.
After we have imagemap as Entity, we can use it further, whether to do additional journeys or to take the data as a report, it can be done such as.
If you are looking for a good chat experience I hope you found the above examples of creating imagemap. See you in the next article.