Twilio Flex

https://www.twilio.com/docs/flex
Admin
Twilio Flex is a digital engagement center platform that enables sales and customer support teams to...
Tokens:117,110
Snippets:1,167
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start the Flex development environment

Source: https://www.twilio.com/docs/flex/quickstart/getting-started-plugin

Navigate to the plugin directory and start the local Flex development server.

```bash
cd plugin-sample
twilio flex:plugins:start
```

--------------------------------

### Example of domain link with parameters

Source: https://www.twilio.com/docs/flex/release-notes/webchat-ui-release-notes

Example of a domain link with parameters that is recognized by the chat link parser.

```text
http://flex.twilio.com?test=true
```

--------------------------------

### Install Flex SDK dependency

Source: https://www.twilio.com/docs/flex/developer/flex-sdk/getting-started

Run this command in your project directory to add the @twilio/flex-sdk package to your existing application.

```bash
npm i @twilio/flex-sdk
```

--------------------------------

### Configure custom tokens

Source: https://www.twilio.com/docs/flex/release-notes/flex-ui-release-notes-for-v2xx

Example of passing custom tokens to the theme configuration within the appconfig object.

```javascript
  appconfig = {
    theme: {
      tokens: {
        custom: {
          myCustomToken: "#ccc"
        }
      }
    }
  }
```

--------------------------------

### View Component Route Configuration

Source: https://www.twilio.com/docs/flex/release-notes/ui-release-notes

Examples of configuring the View component with single or multiple route paths using the route prop.

```javascript
<View key="teams" name="teams" route={{ path: "/supervisor" }}> // both http:/domain/teams and http://domain/supervisor will work

<View key="teams" name="teams" route={{ path: ["/supervisor", "something"] }}> // both http:/domain/teams and http://domain/supervisor and http://domain/something will work
```

--------------------------------

### Register a custom task channel

Source: https://www.twilio.com/docs/flex/release-notes/ui-release-notes

Use Flex.DefaultTaskChannels.createChatTaskChannel to define a new channel and Flex.TaskChannels.register to register it before Flex starts up.

```javascript
const myOwnChatChannel = Flex.DefaultTaskChannels.createChatTaskChannel("myChat",
  (task) => task.taskChannelUniqueName === "chat" && task.attributes.somethingSpecial === "mycCustom");
// can modify myOwnChatChannel here

Flex.TaskChannels.register(myOwnChatChannel);
```

--------------------------------

### Create a Sample Flex Plugin

Source: https://www.twilio.com/docs/flex/quickstart/getting-started-plugin

Use these commands to initialize a new Flex plugin project. Choose between a standard template or a TypeScript-based project.

```bash
# Now we can start with a template plugin for Flex 2.0 with the create command
twilio flex:plugins:create plugin-sample --install

# Or if you prefer a typescript project run
twilio flex:plugins:create plugin-sample --install --typescript
```

--------------------------------

### Install Glance Cobrowse Component via Yarn

Source: https://www.twilio.com/docs/flex/admin-guide/integrations/glance

Use this command to install the Glance Cobrowse dependency in your Flex project using Yarn.

```bash
yarn add @glance-networks/agent-plugin
```

--------------------------------

### Initialize the Flex SDK client

Source: https://www.twilio.com/docs/flex/developer/flex-sdk/getting-started

Use the createClient function to initialize the Flex SDK. This example demonstrates initialization using an authentication token and setting the logger level to debug.

```javascript
import { createClient } from "@twilio/flex-sdk";

async function createFlexClient(tokenForWorker: string) {
    const client = await createClient(tokenForWorker, {
        logger: { level: "debug" }});
    return client;
}
```

--------------------------------

### Install Glance Cobrowse Component via NPM

Source: https://www.twilio.com/docs/flex/admin-guide/integrations/glance

Use this command to install the Glance Cobrowse dependency in your Flex project using NPM.

```bash
npm install @glance-networks/agent-plugin
```

--------------------------------

### Using TaskContext.Consumer

Source: https://www.twilio.com/docs/flex/release-notes/ui-release-notes

Example of using the TaskContext.Consumer pattern to access task attributes in a component.

```javascript
import { withTaskContext } from "@twilio/flex-ui";

const MyComponent: (props) => {
    return (
        <div>{props.task.attributes.someAttribute}</div>
    );
}

const MyComponentWithTask = withTaskContext(MyComponent);
// Register MyComponentWithTask component to Flex instead of MyComponent
```

--------------------------------

### Flex.TaskChannels.register

Source: https://www.twilio.com/docs/flex/release-notes/ui-release-notes

Registers a new task channel definition. This must be called before Flex starts up.

```APIDOC
## Flex.TaskChannels.register(definition: TaskChannelDefinition, mergeWithDefaultChannel = true)

### Description
Registers a task channel definition to be used by Flex. Channel definitions must be registered before the application initializes.

### Parameters
- **definition** (TaskChannelDefinition) - Required - The task channel definition object.
- **mergeWithDefaultChannel** (boolean) - Optional - Whether to merge the definition with default channel settings (default: true).
```

--------------------------------

### Add Glance Component to TaskCanvasHeader

Source: https://www.twilio.com/docs/flex/admin-guide/integrations/glance

Example of adding the Glance component to the TaskCanvasHeader content area.

```javascript
1
flex.TaskCanvasHeader.Content.add(

2
   <Glance

3
          key={"your-key-name"}

4
          groupid={"your-group-id"}

5
          puid={"your-puid"}

6
          openlocation={"tab"}

7
          presence={true}

8
          glancebaseurl={"production"}

9
          visitorid={"the-task-sid"}

10
          debugmode={false}

11
          gicon={true}

12
          authmethod={"LOGINKEY"}

13
          authurl={"auth-url"}

14
          authheaders={{ 'Content-Type': 'application/x-www-form-urlencoded' }}

15
          authbody={authBodyParams}

16
          uiversion={2}

17
          customopenwindow={false}

18
   />, {options}

19
);
```

--------------------------------

### Add a plugin version

Source: https://www.twilio.com/docs/flex/admin-guide/integrations/lionbridge-language-cloud

Register a new version for the plugin using the PluginSid (FPxx) obtained from the creation step.

```bash
curl -X POST "https://flex-api.twilio.com/v1/PluginService/Plugins/FPXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Versions" \
--data-urlencode "Private=true" \
--data-urlencode "Version=1.0.0" \
--data-urlencode "PluginUrl=https://developers.lionbridge.com/geofluent/plugin/plugin-geofluent.js" \
-u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN
```
Tokens:
Raw