How to embed Twilio conversations in a DronaHQ app to send SMSs and WhatsApp messages.

DronaHQ is a low-code platform that allows you to build enterprise applications quickly and easily. One of the most common use cases for enterprise applications is sending SMSs and WhatsApp messages to customers, employees, or other stakeholders. Twilio is a cloud communications platform that provides APIs for sending SMSs and WhatsApp messages. In this blog, we’ll show you how to embed Twilio Conversations in a custom DronaHQ app to capture customer ratings and send SMSs.

Tools:

1. Twilio – a cloud communications platform

2. DronaHQ – a low-code platform for building custom applications

Prerequisites:

1. Twilio account

2. DronaHQ account

Twilio Setup

1. Verify your phone number
Twilio Conversations, you must first verify the phone number you plan to use for outbound messaging. This verification step is mandatory only for Twilio trial accounts. Twilio Conversations also supports several other messaging channels, including in-app messaging, Facebook Messenger that you can configure for your use case.

2. Obtaining the Account SID and Auth Token for your project.
a. Create an API Key
Create an API Key and note the API Key SID (string identifier) and Secret for later. The API Key will authenticate and authorize you to interact with Twilio APIs.
b. Create a Twilio Conversations Service
Create a Conversation Service and note the Conversation Service SID for later. A Conversation Service is a top-level container for other resources in the Twilio Conversations REST API.

DronaHQ Setup

1. Configuring the DronaHQ REST API connector for Twilio
a. Once logged in to your DronaHQ account, head over to ‘Connectors’ and look for the Twilio icon.

b. Enter the Account SID and Auth Token generated in the above steps and click on Save. Your Twilio connector is now configured and ready to be used to send SMSs.

2. Creating the UI in DronaHQ
a. Create a blank application, and add two text input controls for the user name and email. Add a phone control for the phone number to which we want to send the messages to. Also, add rating and text area control for rating and feedback description respectively. At the end add a button, on whose “button_click” action we will configure the Twilio send SMS event.

b. To configure the Twilio SMS event, click on the “Submit Form” button and then the flash icon on the right.

–Firstly add a Validate Screen action, which will check for all the validations and mandatory fields have been filled or not.

-Then add a “Compute” action which will be used to concatenate our phone number to the country code provided by the Phone control. You can use the CONCATENATE() function here like “CONCATENATE( phone.country , phone.number)”

–Then, add a “Set Message” action to set a message for your SMS with dynamic values.

–Add the Twilio connector from the server-side actions.

–Then, select “Send Message” Ready API.

-Select your account from the respective Environment.

-Then bind the “Message Text” with the “message” action we created, “Recipient’s Number” with the concatenated phone number from the action flow, and at the end add the “Sender’s Number” from Twilio.

binding

–In the end, on the “SUCCESS” side of the Twilio action add a “Toast”, to be present on the screen when the Twilio Send Message action performs successfully.

toast
–Following a similar set of steps you can configure the Twilio connector once again to send WhatsApp messages. You will need to add “whatsapp: “ before adding the sender’s and recipient’s numbers.

–Now, you can preview your app and check by submitting the form that will send an SMS and WhatsApp message to the phone provided in the phone control.

preview

Conclusion

In conclusion, by combining the power of Twilio’s cloud communications platform and DronaHQ’s low-code platform, you can create a personalized messaging app for enhancing the in-store customer experience. This tutorial has guided you through the process of embedding Twilio Conversations in a custom DronaHQ app to send SMS and WhatsApp messages.

You can configure the Twilio API to send WhatsApp messages, configure bidirectional SMSes, make a call and more. The UI design created in DronaHQ for capturing customer ratings and feedback can be easily repurposed to capture additional data as per the specific use case requirements. By integrating Twilio capabilities into your DronaHQ app, you have a powerful tool at your disposal to enable seamless communication and data capture with your customers.