Docs
  • Our Plugins
  • Plivo - Voice - In browser calls plugin
    • Getting Started
    • Actions & Events
    • APIs
    • Change Log
  • Twilio In-browser Call Plugin
    • Getting Started
    • Making Calls
    • Receiving Calls
    • Recording a Call
    • Subaccounts
    • States
    • Change Log
  • HubSpot Plugin
  • Transfer Wise Plugin
  • Checkr Plugin
  • More Plugins
  • Plugins Support
  • Bubble Resources
    • Bubble Forum
    • Bubble Manual
Powered by GitBook
On this page
  • Create a Twilio Account
  • Buy a phone number
  • Create a voice application
  • Create an API key
  • Create token & service functions
  • Create Access Token Function
  • Create Voice Function
  • Add the voice URL to the Twilio voice app you have created
  • Add the access token URL to your Bubble plugin
  • Plugin Settings
  • Log Level
  • Create a quick client functions (capability token and voice function) LEGACY
  1. Twilio In-browser Call Plugin

Getting Started

PreviousTwilio In-browser Call PluginNextMaking Calls

Last updated 7 months ago

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 and Get started with a free Twilio account (No credit card required).

Buy a phone number

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

Create a voice application

  1. Under the Programmable Voice Menu > TwiML > 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

  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 .

Create token & service functions

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

  2. Add the following environment variables

    1. CALLER_ID (optional if you're planing on using mutliple Twilio numbers ignore this 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;
    const ttl = 3600; //Time to live for the token, in seconds. 

    // 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,
        ttl: ttl
          }
    );
    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. Copy URL (https://xxxx-####.twil.io/client-voice)

Then add the URL to your app

  1. Select your app

  2. 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. Copy URL it should be something like https://xxxx-####.twil.io/capability-token

  2. 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

Log Level

The value is a number that corresponds to the different levels of logging available. For best practice only change the log level when needed.

Option
Logging Type

0

TRACE

1

DEBUG

2

INFO

3

WARN

4

ERROR

5

SILENT

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. Click "+" to create a new function, then select "Twilio Client Quickstart".

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

Go to

TWIML_APP_SID: add the voice application SID from the

TWILIO_API_KEY: add the API key from the

TWILIO_API_SECRET: add the API key secrete from the

Go to , then manage.

Click the then

Go to

Go to , then manage.

Click service then the

Go to ,

Then Enter your APP_SID ( you will find it under click your app then copy the app SID) and CALLER_ID (Your formatted as +11231231234)

functions
Functions
TwiML Apps
Functions
Functions
TwiML Apps,
Twilio phone number
Twilio
Programmable Voice menu
TwiML Apps
API Keys
functions environment variables
voice application step
API key step
API key step
voice function
access token function