voxtelesys-flow

Overview

The VAST Flow Builder is a low/no-code user interface for building and managing communication flows. The voxtelesys-flow library allows users to implement the VAST Flow Builder into their own front-end JavaScript applications.

Getting Started

Installation

To install this library in your application, run:

npm i voxtelesys-flow

Initialization

To initialize the VAST Flow Builder, create an empty HTML element to mount the Flow Builder into:

<div id="element-id"/>

Then, mount the Flow Builder using the ID of the HTML element and the available configuration options:

import { FlowBuilder } from 'voxtelesys-flow'

await FlowBuilder.init('element-id', {
  apiKey: '<API_KEY>',
  flowGuid: '<FLOW_GUID>',
  onBack: history.back,
  companyName: 'Example Company',
  companyLogo: 'http://example-company.com/logo',
  styling: {
    primaryColor: '#7ac142',
    leftSidebarWidth: '400px',
    defaultFontSize: '1rem'
  }
})

The default CSS styling for the VAST Flow Builder is bundled with the JavaScript and will be automatically loaded when the library is imported.

Configuration

Parameters

• apiKey

  Required. An API key can be created or retrieved from the API Keys page on the Customer Portal.

• flowGuid

  Required. The GUID of the Flow that the user will be able to view and edit in the Flow Builder once it has been mounted. To view the Flows that belong to your account, visit the Flows page on the Customer Portal. Alternatively, you can retrieve a list of Flows using the GET /flows route on the Dashboard API, or create a new Flow using the POST /flows route.

• onBack

  Optional. A function that is executed when the back arrow in the Flow Builder is clicked. If onBack is omitted, then the back arrow will be hidden.

• companyName

  Optional. The text to be displayed at the bottom of the Flow Builder canvas next to "Powered by Voxtelesys". The companyName parameter is used to co-brand the VAST Flow Builder by displaying your company's name on the screen.

• companyLogo

  Optional. The path or URL of an image to be displayed at the bottom of the Flow Builder canvas next to "Powered by Voxtelesys". The companyLogo parameter is used to co-brand the VAST Flow Builder by displaying your company's logo on the screen.

• styling

  Optional. An object with properties that override CSS styles in the Flow Builder.

  The styling object can be used to customize the look and feel of the Flow Builder, such as its colors and font sizes. The properties available in styling are listed below.

Styling Overrides

Sizing

• leftSidebarWidth
• rightSidebarWidth
• backgroundOutlineWidth

Font

• fontFamily
• titleFontSize
• headingFontSize
• subheadingFontSize
• defaultFontSize
• smallFontSize
• extraSmallFontSize
• companyFontSize
• transitionTime

Base Colors

• whiteColor
• gray1Color
• gray2Color
• gray3Color
• gray4Color
• gray5Color
• gray6Color
• gray7Color
• gray8Color
• gray9Color
• gray10Color
• primaryColor
• secondaryColor
• tertiaryColor
• quaternaryColor
• focusColor
• deleteColor
• errorColor
• warningColor
• validColor
• successColor
• codeColor

Alert Colors

• errorAlertTextColor
• errorAlertHighlightColor
• errorAlertBackgroundColor
• errorAlertShadowColor
• infoAlertTextColor
• infoAlertHighlightColor
• infoAlertBackgroundColor
• warningAlertTextColor
• warningAlertHighlightColor
• warningAlertBackgroundColor
• successAlertTextColor
• successAlertHighlightColor
• successAlertBackgroundColor
• successAlertBorderColor

Hover Colors

• primaryHoverColor
• secondaryHoverColor
• tertiaryHoverColor
• quaternaryHoverColor
• deleteHoverColor
• grayHoverColor

Highlight Colors

• primaryHighlightColor
• tertiaryHighlightColor
• grayHighlightColor

Background Colors

• primaryBackgroundColor
• secondaryBackgroundColor
• tertiaryBackgroundColor
• quaternaryBackgroundColor
• errorBackgroundColor
• primaryBackgroundHoverColor
• secondaryBackgroundHoverColor
• tertiaryBackgroundHoverColor
• quaternaryBackgroundHoverColor

Shadow Colors

• successShadowColor
• gray7ShadowColor
• validShadowColor
• focusShadowColor

Dashboard API

All HTTP requests from the VAST Flow Builder are directed to publicly-available routes on the Dashboard API using the API key provided.

In addition to the routes used directly by the VAST Flow Builder, the Dashboard API also provides the ability to:

• View and manage Flows and Flow Versions
• View and update telephone numbers (TNs)
• View and manage route profiles and route profile routes
• View and manage Voice API profiles
• Get trunk groups

See the Dashboard API documentation for more details on the available routes.

Additional Resources

• Flow Builder Tutorials