Twilio Video Chat

This video chat plugin enables you to add highly-customizable video chat windows to your app, and it’s white-labeled. The video chat plugin allows you to draw a video chat window in the design tab and control your chat room through workflow actions. You can start, join, leave, and end rooms, as well as provide the capability to hide/show video, mute/unmute your microphone, or share/stop sharing your screen.

Note: On Safari mobile, Twilio Plugin video chats do not work properly due to some quirks of the browser that are difficult to workaround. When a call is initiated, the users on the call are only able to hear and see themselves, yet Twilio recognizes this call as a successful call.

Video chat

Draw a video chat window in the Design tab from your selection of “Visual elements.”

Show preview

Check this box to let the user see what their video looks like prior to joining a room.

Start a room

Create a video chat for others to join.

Element

Select the Video chat element where you want to display your users’ videos for this room.

Room name

Choose a title for your room.

Participant identifier

A unique field for the user who is starting the room. For example, this might be a username.

# of participants

You can choose from three room sizes: One-on-one, small group, or group. One-on-one calls are encrypted, allowing for heightened security; these chats cannot be recorded. Small group rooms can hold up to four participants and are less expensive to run than regular group rooms. Group rooms can hold up to 50 people, allowing you to host larger chats, conferences, or presentations.

End a room for all

Close a room so that no others can join or continue the chat.

Room name

Title of the room to end.

Join a room

Add a user to an existing room.

Element

Select the Video chat element where you want to display your user’s videos for this room.

Room name

Title of the room to join.

Participant identifier

A unique field for the user who is joining the room. For example, this might be a username.

Leave a room

Remove a particular user from a room. Other users can still join the room or continue the conversation.

Element

Select the Video chat element where the room you want to leave is currently displayed.

Room name

Title of the room to leave.

Mute microphone

Turn off this user’s sound. Other users in the room will not hear them.

Element

Select the Video chat element for the user’s current room.

Room name

Title of the user’s current room.

Unmute microphone

Turn on this user’s sound. Other users in the room will hear them.

Element

Select the Video chat element for the user’s current room.

Room name

Title of the user’s current room.

Show video

Turn on this user’s camera, so that their video is visible to others in the room.

Element

Select the Video chat element for the user’s current room.

Room name

Title of the user’s current room.

Hide video

Turn off this user’s camera, so that their video isn’t visible to others in the room.

Element

Select the Video chat element for the user’s current room.

Room name

Title of the user’s current room.

Share your screen

Show the contents of a user’s screen to members of the room.

Element

Select the Video chat element for the user’s current room.

Room name

Title of the user’s current room.

Stop sharing your screen

Stop showing the content of a user’s screen to members of the room.

Element

Select the Video chat element for the user’s current room.

Room name

Title of the user’s current room.

Retrieve a composition

For small group and group rooms, you have the option to record the call. Twilio “recordings” are not viewer-friendly files. In order to turn a recording into a viewer-friendly MP4 file, you must generate what Twilio calls a “composition.” Luckily, you can do so easily with the “Retrieve Composition” action, which will generate and retrieve a link to a viewer-friendly MP4 file which you can save to a Bubble Thing or view in the Compositions tab of your Twilio console.

Room name

Title of the recorded room.

Setup

To get started, install the video chat plugin in your Plugins tab. Then, navigate to https://www.twilio.com/ 182 and sign up for a Twilio account. This is the account you will use to pay for and manage your video chat functionality.

Once you have signed up for an account, you’ll need to fill out the required information for the plugin in the Settings panel.

You can find the necessary information in your Twilio account console. Your Account SID and Auth Token can be found on the main page of your project dashboard, seen below:

You will then need to generate a new API Key to fill out the “API Key: SID” and “API Key: Secret” fields in the plugin panel. In order to generate an API Key, go to the Settings tab in the Twilio console, then to the API Keys section.

Create a new API Key, giving it whatever name suits you, and copy the SID and Secret to the plugin settings in your Bubble editor.

After that, you’re all set! You can explore the plugin functionality and add video chat to your app right away. If you want to check on your chat rooms, recordings, compositions, or usage, you can do so in the Twilio console under the “Programmable Video” section.

FAQ

What if I want to match users to rooms based on shared criteria?

Because you can enter a dynamic value for the “Room name” when your users join a room, it may be possible to do a search for rooms that match fields on the User type to pair people of similar interests. For example, you might do a search for rooms where “Primary interest = Current user’s primary interest” and join the first or last item.