Skip to main content

How to send a carousel message on LINE?

Quickwork
  • Updated

This article demonstrates how to send a carousel message with images to a user via a bot on LINE.

What you'll need:

Skill level: Intermediate

Time required: 10 minutes

  • LINE developer account  
  • A provider and a channel of the type Messaging API in the LINE developer account
  • Copy-paste skills for webhook URL
  • LINE Messenger in Android/iOS

Use case

Send a carousel message to a user on LINE. The carousel message must contain images of famous Indian cricketers with their associated URI buttons. When a user clicks the buttons, he/she must be redirected to the official Wikipedia page of the Indian cricketers.

  • Trigger: LINE-New text message
  • Action: LINE-Send carousel image message

Prerequisites

Log into your LINE Developer Console account and create a new provider, say My service provider. Then, select the provider and create a Messaging API channel in it:

mceclip0.png

Give a name to the channel, say Indian cricketers; mention its description, category, and subcategory. Accept all the terms and conditions and click Create:

 

mceclip1.png

We'll be connecting this messaging channel with the LINE account on Quickwork. The user receives the carousel message through this channel when the journey gets executed.

Configuring the trigger

  1. Create a new journey named LINE carousel journey.
  2. Under the Event section, choose the LINE app from the drop-down menu present in the Apps field located right below the New Trigger button.
  3. Select the trigger event, New text message, from the drop-down menu in the Triggers field.
  4. Click the Link account button to establish the connection. The Connect to LINE window opens up. Specify the Channel access token and Basic ID of the Indian Cricketers messaging channel. Click here to know how to get these credentials:

    mceclip2.png

  5. Click the Link account button. Your Indian Cricketers messaging channel gets connected with Quickwork.
  6. The trigger's input field now opens up. Specify a random unique name in the Event Name field to generate the webhook URL, say demo:

    mceclip12.png

    Note: The bot key of the channel gets appended to the webhook URL. Verify the webhook generated is of the same bot ID or not. 

  7.  Copy this URL and return to your messaging channel in the LINE developer account. Switch to the Messaging API settings tab. Scroll down the page and search for the Webhook settings section. Paste the copied webhook URL in the Webhook URL field and toggle ON the Use webhook option: 

    mceclip13.png

    Note: Ensure you paste the webhook URL in the Messaging API settings window of a LINE channel that you have connected with Quickwork. If your mismatch this hierarchy, then setting a webhook URL is of no use and you won't get a notification for trigger events.
  8. The completely configured New text message trigger looks like this:

    mceclip5.png

Configuring the action

  1. Under the Steps section, click on the Simple Action button, and choose the LINE app from the drop-down menu present in the Apps list.
  2. Select the Send carousel image message action from the Actions list.
  3. There is no need to create a new connection as the connection for the same app is already present in the same journey. It means that the Indian Cricketers messaging channel gets connected automatically. 
  4. In the To field, drag and drop the User Id data pill under the Source object from the Data Tree Output of the LINE | New text message Trigger.
  5. Specify the message to be displayed for the carousel images in the Title field:

    mceclip6.png

  6. Now, let us configure three carousel image messages with URL buttons for three famous cricketers namely Mahendra Singh Dhoni, Rahul Dravid, and Virat Kohli.
  7. Under the Item 1 object, specify the URL of an image in the Image URL field. E.g., https://img.jagranjosh.com/imported/images/E/GK/MS-Dhoni-Biography.jpg.
  8. Select the Action type as URI action.
  9. In the Label field, enter the name of the button. This button gets displayed below the image and the user gets redirected to a web page upon clicking it. E.g., M. S. Dhoni.
  10. In the URI field, specify the web URL where the user should be redirected. E.g.,  https://en.wikipedia.org/wiki/MS_Dhoni:

    mceclip14.png

  11. Leave all the other input fields empty. Click the Add New Item button to configure the second carousel image. The Item 2 block will open with the same input fields. Refer to the following table to understand what is to be used as input:

    Input fields Data
    Image URL https://images.indianexpress.com/2021/08/rahul-dravid-1200.jpg
    Action type

    URI action

    Label 

    		 R. Dravid
    URI

    https://en.wikipedia.org/wiki/Rahul_Dravid

    mceclip15.png
  12. Leave all the other input fields empty. Click the Add New Item button to configure the third carousel image. The Item 3 block will open with the same input fields. Refer to the following table to understand what is to be used as input:

    Input fields Data
    Image URL https://c.ndtvimg.com/2021-11/pkng8ga_virat-kohli_625x300_09_November_21.jpg
    Action type

    URI action

    Label 

    		 V. Kohli
    URI

    https://en.wikipedia.org/wiki/Virat_Kohli

    mceclip16.png

  13. The action is configured with all three carousel images. The complete action block looks like this:

mceclip11.png

 

Executing the journey

Save the changes of the journey and click the Save & Start button.

Then, install the LINE messenger app on your Android/iOS device. Open the app and search the bot ID of the Indian cricketers channel, which is @795owarf in our case. Add it to your account and send a message to it. The journey executes in the background. As a result, it sends the configured carousel message with images on your mobile device. Refer to the following GIF:

 

line_carousel__2_.gif

Related articles

Comments

0 comments

Please sign in to leave a comment.