📱 Building a Twilio SMS plugin for Bubble

A step-by-step overview of building a Twilio SMS plugin for Bubble

Hey friends 👋🏿

I needed to build a Twilio plugin for a project because of Bubble’s new API updates, my go-to plugin wasn’t yet updated so I figured I’d whip up my own instance and share the journey.

Here’s a high-level overview – for the full tutorial, take a look at the original blog post.

The process

Kick things off by creating your plugin. In the "plugins" section of Bubble, hit “create a plugin” and set up initial settings

Fill out General Settings and select categories for your plugin. These categories are what your plugin appears under in Bubble’s marketplace.

On the “Shared” tab, add your private keys for Twilio – you'll need an Account SID and Auth Token to communicate securely.

Twilio offers a robust REST API, and while we could use Bubble’s API calls tab to connect, in this tutorial we’ll opt for the action editor for greater flexibility.

Complete the general properties and input fields—'from,' 'to,' 'body,' and, optionally, 'messaging service id'—that users will input in the editor.

Tick “this action uses node modules” and include your package.json

In the action code, retrieve the keys you set up earlier and import Twilio and set up the message data, making the messaging service optional in your code

async function(properties, context) {
  // Initialize Twilio credentials from Bubble context
  const accountSid = context.keys["TWILIO_ACCOUNT_SID"];
  const authToken = context.keys["TWILIO_AUTH_TOKEN"];
  const client = require('twilio')(accountSid, authToken);

  // Set up message data with input properties
  const messageData = {
    from: `+${properties.from}`, 
    body: properties.body, 
    to: `+${properties.to}`
  };

  // Include messagingServiceSid if it's provided
  if (properties.messagingServiceSid) {
    messageData.messagingServiceSid = properties.messagingServiceSid;
  }
//rest of code
}

And set up your code to send the message, this is what full code snippet should look like

async function(properties, context) {
  // Initialize Twilio credentials from Bubble context
  const accountSid = context.keys["TWILIO_ACCOUNT_SID"];
  const authToken = context.keys["TWILIO_AUTH_TOKEN"];
  const client = require('twilio')(accountSid, authToken);

  // Set up message data with input properties
  const messageData = {
    from: `+${properties.from}`, 
    body: properties.body, 
    to: `+${properties.to}`
  };

  // Include messagingServiceSid if it's provided
  if (properties.messagingServiceSid) {
    messageData.messagingServiceSid = properties.messagingServiceSid;
  }

  try {
    // Send the message using Twilio client
    const message = await client.messages.create(messageData);
    // Optionally log the message SID on successful delivery
  } catch (error) {
    // Implement error handling depending on the error type
    throw new Error(`Failed to send message: ${error.message}`);
  }
}

With everything set up, you can then implement in bubble. Don’t forget to set the ID for your test app in the editor.

Then once you do, you can add the plugin to your keys and start running it in your workflows.

Then once you do, you can add the plugin to your keys and start running it in your workflows.

Conclusion

That wraps up this introductory tutorial on integrating Twilio’s messaging capabilities with Bubble through a custom plugin. There's a whole array of additional functions you could include to make your messaging plugin even more robust, like leveraging more options from Twilio’s programmable messaging, Twilio voice, or WhatsApp.

I’d be thrilled to see what you come up with using this guide, so don’t hesitate to shoot me a note at hey@lunchpaillabs.com or drop a DM on Twitter!

Lola