Customer.io: automated WhatsApp messages using TimelinesAI Public API

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 : 
{
"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 200 OK response status and Success 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 200 OK response status and Success 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 :
  1. After the request and response are added click the _Send Test _button. You should have the 200 OK response status and Success 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 : 
{
"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 : 
{
"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 200 OK response status and Success 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 :
  1. After the request and response are added click the _Send Test _button. You should have the 200 OK response status and Success 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 :
  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 200 OK response status and Success 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 : 
{
"text": "YOUR_CUSTOM_MESSAGE_HERE"

}
  • YOUR_CUSTOM_MESSAGE_HERE - the desired message ![](https://storage.crisp.chat/users/helpdesk/website/94268256ba492
  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

Updated on: 17/01/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!