How to customize imagemap to capture data to use in chat journey in Amity Bots

  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.

How to customize imagemap to capture data to use in chat journey in Amity Bots

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.


The left image is imagemap, the right image is flex message.

reference:https://developers.line.biz/en/docs/messaging-api/message-types/

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.


The top image is based on imagemap and the lower image is created by 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.


Example Output of imagemap that the system will return.

So we will convert the output to a Postback action format according to the message API template.

The part that converts imagemap to action type as Postback.
The result of converting to Postback’s action type of imagemap message object.

When a chat channel receives a message object sent by the bot system we will receive imagemap message like the image below.

Example of imagemap in the Amity chat platform.

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.

  • We can add a use case to catch the imagemap information after user has selected a button. so that it can only be selected once. By setting a variable as Flag.
    1. Create an external call box to set variables for reference.
    2. Write a check function if you have selected imagemap or not.
An example of creating a further Journey after creating imagemap already.
  • Can view the data in the form of report.
Example of report.


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.