Getting Started

Make sure to add your email to the plugin to (App Owner Email) field. It helps us provide better support when you need it.

Create a Twilio Account

Go to Twilio and Get started with a free Twilio account (No credit card required).

Buy a phone number

Go to the console > Programmable Voice menu. Under this menu > Numbers and Get a number

Create a voice application

  1. Under the Programmable Voice Menu > TwiML > TwiML Apps then

  2. Click "+" to create a new TwiLM app

  3. Give your app a friendly name, then click save.

Create an API key

  1. Go to API Keys

  2. Click "New API key"

  3. Give it a friendly name (ex my bubble app voice)

  4. Click Create

  5. Copy the SID and Secret and store them in a safe place. Later you will add them to the functions environment variables.

Create token & service functions

  1. Go to functions

  2. Create a new service. Give it a name (ex yourappname)

  3. Add the following environment variables

    1. CALLER_ID (optional if you're planing on using mutliple Twilio numbers ignore this step)

    2. TWIML_APP_SID: add the voice application SID from the voice application step

    3. TWILIO_API_KEY: add the API key from the API key step

    4. TWILIO_API_SECRET: add the API key secrete from the API key step

Create Access Token Function

  1. Create a new function. Click "Add +" -> Add Function -> give the function a name (ex access-token)

  2. Add following code

exports.handler = function (context, event, callback) {
    const AccessToken = require('twilio').jwt.AccessToken;
    const VoiceGrant = AccessToken.VoiceGrant;

    // Prepare response
    let response = new Twilio.Response();

    // Add CORS Headers
    let headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET",
    "Content-Type": "application/json"
    };
    
    // Used when generating any kind of tokens
    const twilioAccountSid = context.ACCOUNT_SID;
    const twilioApiKey = context.TWILIO_API_KEY;
    const twilioApiSecret = context.TWILIO_API_SECRET;

    // Used specifically for creating Voice tokens
    const outgoingApplicationSid = context.TWIML_APP_SID;
    const identity = event.identity;

    // Create a "grant" which enables a client to use Voice as a given user
    const voiceGrant = new VoiceGrant({
        outgoingApplicationSid: outgoingApplicationSid,
        incomingAllow: true, // Optional: add to allow incoming calls
    });

    // Create an access token which we will sign and return to the client,
    // containing the grant we just created
    const token = new AccessToken(
        twilioAccountSid,
        twilioApiKey,
        twilioApiSecret,
        { identity: identity }
    );
    token.addGrant(voiceGrant);

    const jwt = token.toJwt();
    console.log(jwt);

    response.setHeaders(headers);
    response.setStatusCode(200);

    // Set body
    response.setBody({
        'identity': identity,
        'token': jwt
    });

    // Return the response
    callback(null, response);
};

  1. Make sure the function is Public, Click the icon next to the function and select Public

  2. Save

  3. Deploy

Create Voice Function

  1. Create a new function. Click "Add +" -> Add Function -> give the function a name (ex client-voice)

  2. Add following code Replace context.CALLER_ID with event.appCallerId if you are using multi Twilio numbers

exports.handler = function(context, event, callback) {
    let twiml = new Twilio.twiml.VoiceResponse();
    console.log(event.To)
    console.log(event.From)
    if(event.To) {
      // Wrap the phone number or client name in the appropriate TwiML verb
      // if is a valid phone number
      const attr = isAValidPhoneNumber(event.To) ? 'number' : 'client';

      const dial = twiml.dial({
        answerOnBridge: true,
        callerId: context.CALLER_ID
      });
      dial[attr]({}, event.To);
    } else {
      twiml.say('Sorry unable to make the call!');
    }

     callback(null, twiml);
};

/**
* Checks if the given value is valid as phone number
* @param {Number|String} number
* @return {Boolean}
*/
function isAValidPhoneNumber(number) {
  return /^[\d\+\-\(\) ]+$/.test(number);
};

  1. Make sure the function is Public, Click the icon next to the function and select Public

  2. Save

  3. Deploy

Add the voice URL to the Twilio voice app you have created

To get your capability token URL:

  1. Go to Functions, then manage.

  2. Click the voice function then

  3. Copy URL (https://xxxx-####.twil.io/client-voice)

Then add the URL to your app

  1. Go to TwiML Apps

  2. Select your app

  3. In Voice > Request URL > Paste your client voice URL (https://xxxx-####.twil.io/client-voice)

Add the access token URL to your Bubble plugin

To get your access token URL:

  1. Go to Functions, then manage.

  2. Click service then the access token function

  3. Copy URL it should be something like https://xxxx-####.twil.io/capability-token

  4. Paste this Capability token URL in your bubble plugin

Plugin Settings

Make sure you have all the plugin settings filled as shown below. Go to Plugins > Twilio Plugin > Fill out the username, password, accessTokenURL, & App Owner Email

If you are using an old version of our plugin you may need to use the following function instead.

Create a quick client functions (capability token and voice function) LEGACY

  1. Go to Functions,

  2. Click "+" to create a new function, then select "Twilio Client Quickstart".

  3. Then Enter your APP_SID ( you will find it under TwiML Apps, click your app then copy the app SID) and CALLER_ID (Your Twilio phone number formatted as +11231231234)

  4. Under the function configuration code replace const identity = 'the_user_id' with const identity = event.identity

PreviousTwilio In-browser Call PluginNextMaking Calls

Last updated