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

NPM (Recommended)

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();
});

• Auto Generated Documentation
• React Demo Application: See our React Demo App for full examples loading from NPM
• Simple Web Demo: See our Simple Web Demo for full examples loading from our CDN