Twilio Migration Conversation API

Twilio

Replacing the chat widget for 2.0:

Example webchat REACT app

Another webchat UI sample

Get Started with Flex Conversations

Handle email tasks

Overwritting Theme

Flex UI enhancement

Connecting Twilio Studio To Conversations

Webchat 2.0 installation guide

Webchat 3.0 (Public Beta)

Migrate to WebChat 3.0

  • Form fields cannot be customized.
  • Ability to change the theme, style, and brand of webchat (only light and dark)
  • Hosted by Twilio
  • Deployment Key
  • Can be embedded in website
    • In the row for your new deployment key, click the edit icon.
    • On the Edit Deployment Key page, scroll down to the Embed code section.
    • Copy the embed code sections to the head and body of your website’s index.html file. You may need to work with your website administrator to complete this task.
    • In the body of your website’s index.html file, also add the following line:
      <div id="twilio-webchat-widget-root"></div>

Create Flex sample plugin

twilio flex:plugins:create plugin-sample --install --flexui2

Professional Services Flex Templates

Flex Manager access to Conversation SDK

  • user: UserInfo#
    Current user information

    conversationsClient#
    Instance of Twilio Conversation Client.

    voiceClient: twilio-client:Device#
    Returns an instance of Twilio.Device which is used to handle calls.

    workerClient: twilio-taskrouter:Worker#
    Returns an instance of Twilio TaskRouter Worker Client.

    insightsClient: twilio-sync:Client#
    Returns an instance of Twilio Sync Client.

Manage conversation address (SMS & CHAT)

Connect studio flow with incoming conversation

  • In Flex Conversations (which requires Flex UI 2.0), a new Trigger Incoming Conversation has been added. In this case, Send to Flex will create a new Interaction using the /Interactions endpoint, which then creates a new Task for assignment to a Worker.
  • Trigger Widget
    • Account SID {{trigger.conversation.AccountSid}}
      Body {{trigger.conversation.Body}}
      Channel SID {{trigger.conversation.ChannelSid}}
      Conversation SID {{trigger.conversation.ConversationSid}}
      Date Created {{trigger.conversation.DateCreated}}
      From (Conversation) {{trigger.conversation.From}}
      Message SID {{trigger.conversation.MessageSid}}
      Messaging Service SID {{trigger.conversation.MessagingServiceSid}}