How to Send Personalised Media Messages Using Message Variables in the Bot Builder

Maria Scieranska October 27, 2023 14:49

Objective

How to Send Personalised Media Messages Using Message Variables in the Bot Builder.

Applies To

Jumper
Bot Builder

Bot Builder supports three options for Media Message Types (Image, Video, File), and it provides flexibility with how these media elements can be included:

Upload: This option allows users to directly upload media files, such as images, videos, or files, from their local devices or a selected location.
Paste URL: Users can provide a URL pointing to the media they want to share. The chatbot can then fetch and display the media from the provided URL.
Message Variable: Message variables are often used to dynamically populate media content based on user interactions or data obtained during the conversation or 3rd Party API responses. This can be a powerful way to personalise the experience for users.

These options offer a range of possibilities for enhancing chatbot interactions and providing a more engaging and interactive experience for users.

Content:

Configuring Bot for Media Message Types via Upload Method
Configuring Bot for Media Message Types via URL Method
Configuring Bot for Media Message Types via Message Variable Method
Using Custom Data as Message Variable (custom_field_fieldname)
Configuring Bot for Media Message Types via Message Variable with 3rd Party API calls

Configuring Bot for Media Message Types via Upload Method

This option allows users to directly upload media files, such as images, videos, or files, from their local devices or a selected location.

Under bot builder, drag any of the message types from image/video/file, and click on the card for the selected message type; now, under the Edit message template section, you will find the option to add the image/video/file, click on the same to start your upload.
Below is an example of an image message type.
Now click on the Upload option for the selected Media, and upload it from your local device.
Below is an example of an image upload option.

Once selected your image will be uploaded and ready to be used for the bot.

Configuring Bot for Media Message Types via URL Method

In this method, users can provide a URL pointing to the media they want to share. The chatbot can then fetch and display the media from the provided URL.

Under bot builder, drag any of the message types from image/video/file, and click on the card for the selected message type, now under the Edit message template section, you will find the option to add the image/video/file, click on the same to start your upload.
Below is an example of an image message type.
Paste the media URL under the input section.

Once added click on Save. Now your Media is ready to be used for the bot.

Below is an example of an image delivered to a customer using the URL method in the bot.

Configuring Bot for Media Message Types via Message Variable Method

Message variables are often used to dynamically populate media content based on user interactions or data obtained during the conversation or 3rd Party API responses. This can be a powerful way to personalise the experience for users.

Using Custom Data as Message Variable (custom_field_fieldname)

To use custom data as a message variable, make sure your customers have the custom field data containing the media URL to be used under the bot. I.e. for the type of media you want to add under the bot, your custom field must contain the URL for the same.
Below is an example of a customer with custom data for image/video/file URL links.

Note: In case you want to bulk upload URLs under custom data for your customer, you can export & import for your existing customers or just import for new customers using the CSV upload method.

For example, in the CSV file, you can add a new column named “imageurl” (this field represents the custom field name) with its value as a Media URL link & upload the CSV file.

Once you have verified the custom data for your customers exists, you can proceed with the below steps.

Under bot builder, drag any of the message types from image/video/file, and click on the card for the selected message type, now under the Edit message template section, you will find the option to add the image/video/file, click on the same to start your upload.
Below is an example of an image message type.
Now click on the card under the Edit Message template section for the selected Media Message Type & add the message variable <custom_field_fieldname> under paste the media link section that can include any of the one media content i.e. image, file, or video. The “field name” in the message variable <custom_field_fieldname> corresponds to the custom data field name saved under the customer.
Post adding click on Save.
Once a customer engages with the bot flow, this message variable will extract the link from the custom field value available for the customer.
Below is an example of an Image Media that is called using the Message Variable, in the following format i.e. <custom_field_imageurl>, where the “imageurl” is the custom field name.
Once this bot is triggered, the customers will receive the media based on the message variable.
Below is an example of custom data containing a value of Image URL, that is being used as a Message variable i.e. “ <custom_field_imageurl>” in the bot flow.
Note: “imageurl” is just a sample custom field name stored under custom data. You can add your custom field name & provide the media URL link for the same.

Below is an example of an image delivered to a customer using the message variable <custom_field_fieldname> in the bot.

You can also use the combination of URL+ <custom_field_fieldname> message variable.
Below is an example of an Image Media URL that is called using the Message Variable, in the following format i.e. URL (https://picsum.photos/id/1/200/) + <custom_field_url>, where the “url” is the custom field name.

Below is an example of custom data containing a partial value of the Image URL, that is being used as a Message variable i.e. “ <custom_field_url>” & will be appended to the link for the Media URL to provide the personalised media message.

Once this bot is triggered, the customers will receive the media based on the combination of URL (https://picsum.photos/id/1/200/) + <custom_field_url> (300),
i.e https://picsum.photos/id/1/200/300.
Below is an example of image media delivered to the customer using the combination of URL+ <custom_field_fieldname> message variable in the bot.

Configuring Bot for Media Message Types via Message Variable with 3rd Party API calls

In this method, Message variables are used to dynamically populate media content based on 3rd Party API responses.
This method offers a range of possibilities for enhancing chatbot interactions and providing a more engaging and interactive experience for your customers.

First, you need to create a bot & add a step (e.g. text message) with the operation for 3rd Party API Calls in the bot builder, to know more about setting up a bot for 3rd Party API Calls click here.

You can use the below sample API for testing the API call in the bot builder.
Sample API for testing - https://reqres.in/api/users/2
Once you have saved your 3rd Party API call request in the bot, confirm your API response.
Below is an example of the sample API response using the GET method.
Now to utilize the value of the previous hit API response under 3rd Party API operation for the Media message types (image, video & file) you need to use the message variable <apihit_>.
The sample API response contains a field: value pair, let's say from our sample API response, we need to fetch the image URL data.
In the below sample API response, you need to fetch the field named “avatar”, which contains the image URL & use it for the image media message type.
Under bot builder, drag the media message type required for your bot, and click on the card for the selected message type.
In the Edit message template section of the selected media message type, you will find the option to add/upload the image/video/file, click on the same to get started.
Now here, you need to use the <apihit_> message variable, to call the media URL received from the 3rd party API response.
In the below example, the “avatar” field from the sample API is called for the image media type URL using the <apihit_> message variable in the format “<apihit_["data"]["avatar"]>”. Once added click on the Save option.