Skip to main content

Ciptex Race Client SDK

Race Client SDK can be used to power javascript applications with Voice, Video, Webchat and Forms from a single SDK. Functionality is Lazy Loaded on demand based on functionality initalised to reduce Package Size.

All channels are also pre-integrated with Segment!

This library can only be consumed together with Ciptex Race for Twilio Flex. Visit https://www.ciptex.com/race to find out more.

Please refer to our Auto Generated Documentation for advanced configration.

Install​

RACE Client SDK can be installed as a Dependency using NPM

You should install Locally into each repo using:

npm install @ciptex/race-client-sdk@latest --save

You can also include it in your application using our CDN.

CDN​

Releases of race-client-sdk.js are hosted on our CDN, and you can include these directly in your web app using a <script> tag.

<script  src="https://cdn.ciptex.com/race-client-sdk/0.1.1/race-client-sdk.min.js"  crossorigin="anonymous" />

Using this method, race-client-sdk.js will set a browser global:

const Voice = RaceSDK.Voice;
const Video = RaceSDK.Video;
const Flexchat = RaceSDK.Webchat;
const Form = RaceSDK.Form;
const Sync = RaceSDK.Sync;
const VideoProcessor = RaceSDK.VideoProcessor;

Usage​

Video​

Video uses the Ciptex Race Video APIs to power the video connection and create the Twilio Flex Task.

ESM​

import { Video } from "@ciptex/race-client-sdk";

const video = new Video({ accountSid:  ACCOUNT_SID, identity:  IDENTITY });

video.on("video#ready", () => {
    video.connect({ localMediaContainer, remoteMediaContainer });
});

CDN​

const video = new RaceSDK.Video({ accountSid:  ACCOUNT_SID, identity:  IDENTITY });

video.on("video#ready", () => {
    video.connect({ localMediaContainer, remoteMediaContainer });
});

Voice​

Voice requires a Twiml App to Create a connection to your Twilio Studio Flow or Twiml Webhook.

You can create a Twiml App by going to Voice in the Twilio Console

Then Goto Twiml Apps. Create a new Twiml App.

The Voice Request URL should be your Webhook URL.

You can initalise a Voice Client by using:

ESM​

import { Voice } from "@ciptex/race-client-sdk";

const voice = new Voice({ 
    accountSid:  ACCOUNT_SID, 
    identity:  IDENTITY, 
    voiceAppSid:  TWIML_APP_SID 
});

voice.on("voice#ready", () => {
    voice.connect({ to: VOICE_APP_CLI });
});

CDN​

const voice = new RaceSDK.Voice({ 
    accountSid:  ACCOUNT_SID, 
    identity:  IDENTITY, 
    voiceAppSid:  VOICE_APP_SID 
});

voice.on("voice#ready", () => {
    voice.connect({ to:  VOICE_APP_CLI });
});

Twilio Flex Webchat​

Twilio Flex Webchat can be bootstrapped simply through the SDK automatically loading in your Race Configured Webchat Config

ESM​

import { Webchat } from "@ciptex/race-client-sdk";

const webchat = new Webchat({ 
    accountSid: ACCOUNT_SID, 
    flowSid: FLEXCHAT_FLOW_SID 
});

webchat.on("flexchat#ready", () => {
    webchat.init();
});

CDN​

const webchat = new RaceSDK.Webchat({ 
    accountSid: ACCOUNT_SID, 
    flowSid: FLEXCHAT_FLOW_SID 
});

webchat.on("flexchat#ready", () => {
    webchat.init();
});

Form​

Forms are rendered directly into your Web Applications at the specified Element:

ESM​

import { Form } from "@ciptex/race-client-sdk";

const form = new Form({ 
    accountSid: ACCOUNT_SID, 
    formId: FORM_ID 
});

form.on("form#ready", () => {
    form.init({ formContainer: localformContainer, theme: { maxWidth: "800px" } });
});

CDN​

const form = new RaceSDK.Form({ 
    accountSid: ACCOUNT_SID, 
    formId: FORM_ID 
});

form.on("form#ready", () => {
    form.init({
        formContainer:  document.getElementById("form"),
        theme: {
            maxWidth:  "800px"
        }
    })
});

Sync​

Sync allows you to subscribe to Twilio Sync Objects and Maps easily to power things like Open and Closing Times in conjunction with Race Video and Race FlexChat:

ESM​

import { Sync } from "@ciptex/race-client-sdk";

const sync = new Sync({ 
    accountSid: ACCOUNT_SID, 
    identity: IDENTITY 
});

sync.on("sync#ready", () => {
    sync.init();
});

CDN​

const sync = new RaceSDK.Sync({ 
    accountSid: ACCOUNT_SID, 
    identity: IDENTITY 
});

sync.on("sync#ready", () => {
    sync.init();
});