Skip to main content

Customer.io: automated WhatsApp messages using TimelinesAI Public API

Updated this week

via Customer.io Journeys Workflow

| This Customer.io workflow: sends WhatsApp messages when a user fills out a web form; checks for responses, and follows up with additional messages if no response is received. If a response is received, the workflow sends an automated thank-you message.. The flow is based on TimelinesAI Public API and Customer.io Journeys Workflow.

Table of Content

Setting up the Trigger ( web form) Sending the 1st automated WhatsApp message in response to the filled-in form Getting data about TimelinesAI chat ID and message sent timestamp Verifying if the 1st WhatsApp message received a response or not Sending the the 2nd automated WhatsApp message if no response was received for the 1st one Verifying if the 2nd WhatsApp message received a response

Setting up the Trigger

  1. Open your Customer.io account > Campaigns

  2. Create a campaign: give your campaign the desired name, description, and tags

  3. Select the desired trigger. In this example, we will use the _When someone submits a form_ trigger

  4. Configure your form. This workflow requires a form several hidden fields. Please check with the form provider whether such fields can be added to the form. Hidden field names must have the values listed below and values should be left empty. Values to those fields will be added by the workflow automatically at a later stages.

Required hidden field names:

  • message_1

  • message_2

  • chatid

  • message1_timestamp

  • message2_timestamp

  • last_message_timestamp

  • last_message_timestamp_2

Required standard field:

  • field for the phone number that the user fills in within the form.

  1. Select desired _Settings_ and _Goal & Exist _

  2. Save your campaign and fill in your form to get the initial data for the further workflow steps. When the form is submitted new contact must appear at Customer.io > People. The created contact will have the form field data as attributes. Hidden fields will result in attributes with xxxxx as a value.

Sending the 1st automated WhatsApp message in response to the filled-in form

The purpose of this step is to automatically send the 1st WhatsApp message when the customer fills in the form

  1. Re-open your campaign at Customer.io and navigate to the _Workflows_ tab.

  2. Drag and drop the _Send and Receive Data_ to the workflow board ( place it after the Trigger). Click the newly placed "Webhooks" module to configure it.

  1. Configure the module:

  • WEBHOOK NAME - rename the module to _Send 1st WA message_

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: POST

  • URL: https://app.timelines.ai/integrations/api/messages

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX must be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Request body: add

{"phone": "YOUR_DATA_HERE","whatsapp_account_phone": "+YOUR_WA_SENDER_NUMBER_HERE","text": "YOUR_CUSTOM_MESSAGE_HERE"}

  • YOUR_WA_SENDER_NUMBER_HERE - must contain your WhatsApp account number in an international format

  • YOUR_CUSTOM_MESSAGE_HERE - the desired message

  • YOUR_DATA_HERE - must contain the phone number person entered when filling in your form. To add custom data, delete the YOUR_DATA_HERE text first, Leave the cursor between " " and open the sample data from the left sidebar > _Event Data_ tab > scroll down to find the form field that contains a phone number > click the + next to it > select T_he message or action will fail_ in a popup > click add. Your request will change to something like this: "phone": "############{{event.nLJpTuNCaZrs}}"

  • Response - switch to the _Response_ tab > Setup an attribute > select message_1 under the _Set _drop down > add ############{{response.data.message_uid}} into the request box

  1. After the request and response are added click the _Send Test _button in the upper right corner of the page. You should have the ${color}#2a9d3d response status and ${color}#2a9d3d message for setting the attribute:

Getting data about TimelinesAI chat ID and message sent timestamp

The purpose of this step is to obtain the chatID and timestamp of the initial WhatsApp message. This information is essential for determining whether the customer responded to the first message later on

  1. Re-open your campaign at Customer.io and navigate to the Workflows tab.

  2. Drag and drop the _Send and Receive Data_ to the workflow board ( place it after the _Send 1st WA message_ module). Click the newly placed "Webhooks" module to configure it.

  3. Configure the module:

  • WEBHOOK NAME - rename the module to _Get chatID and 1st message timestamp_

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: GET

  • URL: https://app.timelines.ai/integrations/api/messages/############{{customer.message_1}}

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Response: switch to the _Response_ tab > Setup an attribute> select chatid under the _Set _drop down > add ############{{response.data.chat_id}} into the request box . Then click Set another attribute. Select message1_timestamp under the _Set_ drop down> add ############{{response.data.timestamp}} into the request box

  1. After the request and response are added click the _Send Test _button. You should have the ${color}#2a9d3d response status and ${color}#2a9d3d message for setting the attribute

  2. Drag and drop the _Time Delay_ to the workflow board ( place it after the _Get chatID and 1st message timestamp_ module). Select the desired amount of time you would like the flow to hold on until proceeding further. Example: 1 hour

  3. Drag and drop the _Send and Receive Data_ to the workflow board ( place it after the _Time Delay_ module). Click the newly placed "Webhooks" module to configure it.

  4. Configure the module:

  • WEBHOOK NAME - rename the module to _Check chatID_

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: GET

  • URL: https://app.timelines.ai/integrations/api/chats/############{{customer.chatid}}

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Response: switch to the _Response_ tab > Setup an attribute> select last_message_timestamp under the _Set _drop down > add ############{{response.data.last_message_timestamp}} into the request box .

  1. After the request and response are added click the _Send Test _button. You should have the ${color}#2a9d3d response status and ${color}#2a9d3d message for setting the attribute

Intermediate results:

Verifying if the 1st WhatsApp message received a response or not. Sending a "Thank you" message if the response was received.

  1. Drag and drop the _True/False branch_ to the workflow board ( place it after the _Check chatID_ module).

  • Name to avoid confusion we recommend giving the following name to this module: _TRUE=no reply. customer replied to 1st message? _

  • Conditions : select _lastmessagetimestamp_ in the first drop down; _is equal to_ in the second drop down; _the current person's attribute_ in the third drop down; _message1_timestamp_ in the fourth drop down :

Our workflow is now split into two branches: "True" indicates that the customer has not replied to the initial WhatsApp message, while "False" indicates that the customer has replied.

| It is crucial to consider that determining whether a customer has responded involves comparing two timestamps: the timestamp of the initial WhatsApp message and the timestamp of the last message in the chat. If these timestamps are identical, it indicates that no new messages have appeared in the chat, directly suggesting that the user has not replied to the first message. Conversely, if the timestamps do not match, it implies that new messages were present in the chat after the first WhatsApp message was sent. While this strongly suggests a response, it is not an absolute guarantee, as it is conceivable that, within the one-hour waiting period between the first message and the present moment, you may have sent another message to the user, altering the last message timestamp.

Let's finish the "False" branch first:

  1. Drag and drop the _Send and Receive Data_ to the workflow board ( place it under the _False_ branch). Click the newly placed "Webhooks" module to configure it.

  2. Configure the module:

  • WEBHOOK NAME - give the module any name. Example: Send Thank you message

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: POST

  • URL: https://app.timelines.ai/integrations/api/chats/############{{customer.chatid}}/messages

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Request body: add

{"text": "YOUR_CUSTOM_MESSAGE_HERE"}

  • YOUR_CUSTOM_MESSAGE_HERE - the desired message

  1. Drag and drop the Exit module to the workflow

Sending the the 2nd automated WhatsApp message if no response was received for the 1st one

  1. Drag and drop the _Send and Receive Data_ to the workflow board ( place it under the True branch). Click the newly placed "Webhooks" module to configure it.

  2. Configure the module:

  • WEBHOOK NAME - name the module _Send 2nd WA message_

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: POST

  • URL: https://app.timelines.ai/integrations/api/chats/############{{customer.chatid}}/messages

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Request body: add

{"text": "YOUR_CUSTOM_MESSAGE_HERE"}

  • YOUR_CUSTOM_MESSAGE_HERE - the desired message

  • Response: switch to the _Response_ tab > setup an attribute > select message_2 under the _Set _drop down > add ############{{response.data.message_uid}} into the request box .

  1. After the request and response are added click the _Send Test _button in the upper right corner of the page. You should have the ${color}#2a9d3d response status and ${color}#2a9d3d message for setting the attribute

  2. Drag and drop the _Send and Receive Data_ to the workflow board ( place it after the _Send 1st WA message_ module). Click the newly placed "Webhooks" module to configure it.

  3. Configure the module:

  • WEBHOOK NAME - rename the module to _Get 2nd message timestamp_

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: GET

  • URL: https://app.timelines.ai/integrations/api/messages/############{{customer.message_2}}

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Response: switch to the _Response_ tab > Setup an attribute> select message2_timestamp under the _Set_ drop down> add ############{{response.data.timestamp}} into the request box

  1. After the request and response are added click the _Send Test _button. You should have the ${color}#2a9d3d response status and ${color}#2a9d3d message for setting the attribute

  2. Drag and drop the _Time Delay_ to the workflow board ( place it after the _Get 2nd message timestamp_ module). Select the desired amount of time you would like the flow to hold on until proceeding further. Example: 1 hour

  3. Drag and drop the _Send and Receive Data_ to the workflow board ( place it after the _Time Delay_ module). Click the newly placed "Webhooks" module to configure it.

  4. Configure the module:

  • WEBHOOK NAME - rename the module to _Check chatID_

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: GET

  • URL: https://app.timelines.ai/integrations/api/chats/############{{customer.chatid}}

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Response: switch to the _Response_ tab > select last_message_timestamp_2 under the _Set _drop down > add ############{{response.data.last_message_timestamp}} into the request box .

  1. After the request and response are added click the _Send Test _button in the upper right corner of the page. You should have the ${color}#2a9d3d response status and ${color}#2a9d3d message for setting the attribute

Verifying if the 2nd WhatsApp message received a response

  1. Drag and drop the _True/False branch_ to the workflow board ( place it after the _Check chatID_ module).

  • Name to avoid confusion we recommend giving the following name to this module: _TRUE=no reply. customer replied to 2nd message? _

  • Conditions : select _last_message_timestamp_2_ in the first drop down; _is equal to_ in the second drop down; _the current person's attribute _in the third drop down; _message2_timestamp_ in the fourth drop down :

Now our workflow is divided into 2 branches again where "True" = customer has NOT replied to the second WhatsApp Message and "False" = customer replied.

  1. Drag and drop the _Send and Receive Data_ to the workflow board ( place it under the False branch). When placed it will create a new block called "Webhooks" by default.

  2. Configure the module:

  • WEBHOOK NAME - give the module any name. Example: Send Thank you message

  • SENDING BEHAVIOR- select _send automatically _

  • other settings - select as needed

  1. Add a request :

  • Type: POST

  • URL: https://app.timelines.ai/integrations/api/chats/############{{customer.chatid}}/messages

  • Header1: name = _Content-Type_, value = _application/json_

  • Header2: name = Authorization, value = Bearer XXX . Where XXX be replaced with your TimelinesAI token from https://app.timelines.ai/integrations/api/

  • Request body: add

{"text": "YOUR_CUSTOM_MESSAGE_HERE"}

  1. Drag and drop the Exit module to the workflow

  2. Drag and drop the Exit module to the workflow under the _True _branch

End result: user fills in the form, workflow sends the 1st WhatsApp message automatically in response to the filled in form> checks whether user replied to the 1st Message. If yes > send a Thank you message in response and exist the flow. If user did not reply to the 1st message: send the 2nd WhatsApp message > check whether user replied to the 2nd message. If yes > send a Thank you message in response and exist the flow. If user has not replied to the 2nd message > exit the flow. Download the full workflow image here: https://storage.crisp.chat/users/helpdesk/website/94268256ba492800/customerio-workflow-sending-wa_k4393j.png

Related Articles
Action: Send a Webhook
HubSpot & Zapier: add labels to chats in TimelinesAI depending on who is the owner of the contact at HubSpot
Make.com: TimelinesAI Integration Overview
Zapier.com: how to use custom requests to TimelinesAI Public API
OttoKit.com: how to use TimelinesAI webhooks as a trigger
Did this answer your question?