@sawport/react-sdk

v1.3.0

Published

a month ago

The Sawport Widget enables secure customer interactions—video calls, chat, document upload, and e-signature—embedded directly into your website or web application.

Downloads

574

0High
0Medium
0Low

sawportinc

myckhel

Sawport Widget Integration Guide

Overview

The Sawport Widget enables secure customer interactions—video calls, chat, document upload, and e-signature—embedded directly into your website or web application.

Available integrations:

Web (CDN Embedded)
React SDK
Vue.js ES Module Integration

This guide provides configuration steps and usage examples for all supported platforms.

Using Sawport Widget on the Web (CDN)

2.1 Add Required Scripts and Styles

Place this inside your HTML <head> tag:

<link
  href="https://cdn.jsdelivr.net/npm/@sawport/react-sdk/dist/react-sdk.css"
  rel="stylesheet"
/>

2.2 Create Widget Container & Mount the Widget

Place this immediately after the <body> tag:

<div style="position: fixed; bottom: 20px; right: 20px; z-index: 200" id="sawport-widget"></div>

<script src="https://cdn.jsdelivr.net/npm/@sawport/react-sdk/dist/index.standalone.js" type="text/javascript"></script>

<script type="text/javascript">
  function docReady(fn) {
    ['complete', 'interactive'].includes(document.readyState)
      ? setTimeout(fn, 1)
      : document.addEventListener('DOMContentLoaded', fn);
  }

  docReady(() => window.sawportReactSDK.mountWidget(
    {
      baseURL: "https://{{BASE_URL}}",
      apiURL: "https://{{BASE_URL}}/api/v1/",
      projectId: "{{PROJECT_ID}}",
      user: { email: '[email protected]', mobile: '080XXXXXXXXX', name: 'Firstname Lastname' }, // optional
    },
    "sawport-widget"
  ));
}
</script>

2.3 Complete HTML Example

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/@sawport/react-sdk/dist/react-sdk.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <!-- Your website content -->

    <div
      style="position: fixed; bottom: 20px; right: 20px; z-index: 200"
      id="sawport-widget"
    ></div>

    <script src="https://cdn.jsdelivr.net/npm/@sawport/react-sdk/dist/index.standalone.js" type="text/javascript"></script>

    <script type="text/javascript">
      function docReady(fn) {
        ['complete', 'interactive'].includes(document.readyState)
          ? setTimeout(fn, 1)
          : document.addEventListener('DOMContentLoaded', fn);
      }
    
      docReady(() => window.sawportReactSDK.mountWidget(
        {
          baseURL: "https://{{BASE_URL}}",
          apiURL: "https://{{BASE_URL}}/api/v1/",
          projectId: "{{PROJECT_ID}}",
          user: { email: '[email protected]', mobile: '080XXXXXXXXX', name: 'Firstname Lastname' }, // optional
        },
        "sawport-widget"
      ));
    </script>
  </body>
</html>

2.4 Updating Enterprise Credentials Dynamically

<script type="text/javascript">
  window.sawportReactSDK.setSawportConfig({
    baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
    apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
    projectId: 'XXXXXXXXXXXXXX',
    user: {
      email: '[email protected]',
      mobile: '080XXXXXXXXX',
      name: 'Firstname Lastname',
    }
  });
</script>

Using the Widget in ReactJS

3.1 Install the SDK

yarn add @sawport/react-sdk

3.2 Configure the SDK (Global Config)

Wrap your app with SawportContext.Provider:

import { SawportContext } from '@sawport/react-sdk';

<SawportContext.Provider
  value={{
    config: {
      baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
      apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
      projectId: 'XXXXXXXXXXXXXX'
    }
  }}
>
  <YourApp />
</SawportContext.Provider>

3.3 Using the Widget

import { Widget } from '@sawport/react-sdk';

<Widget
  user={{
    email: '[email protected]',
    mobile: '080XXXXXXXXX',
    name: 'Firstname Lastname'
  }}
/>

3.4 Updating Config at Runtime

import { setSawportConfig } from '@sawport/react-sdk';

setSawportConfig({
  user: { 
    email: '[email protected]',
    mobile: '080XXXXXXXXX',
    name: 'Firstname Lastname'
  },
  baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
  apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
  projectId: 'XXXXXXXXXXXXXX'
});

Using the Widget in Vue.js

4.1 Install the SDK

yarn add @sawport/react-sdk

4.2 Create Widget Mounting Point

<div id="sawport-widget"></div>

4.3 Mount Widget From Vue App

<script setup>
import { onMounted } from 'vue'
import { mountWidget } from '@sawport/react-sdk'
import HelloWorld from './components/HelloWorld.vue'
// import the SDK css styling
import '@sawport/react-sdk/dist/react-sdk.css'

const dashboardUrl = 'https://{DASHBOARD_HOST_DOMAIN}'

onMounted(() => {
  mountWidget({
    baseURL: dashboardUrl,
    apiURL: `${dashboardUrl}/api/v1/`,
    projectId: 'XXXXXXXXXXXXXX',
    user: {
      email: '[email protected]',
      mobile: '2348123456789',
      name: 'Firstname Lastname'
    },
  }, 'sawport-widget')
})
</script>

<template>
  <div class="wrapper">
    <HelloWorld msg="You did it!" />
  </div>
</template>

API Reference: Sawport SDK

5.1 Widget Component

React component for embedding the widget.
Props:
- user: Customer information
- projectId: Enterprise ID

5.2 SawportContext

Global configuration provider.
Properties:
- config: Sawport configuration object
- setConfig: Update configuration

5.3 setSawportConfig

Function for updating SDK config globally.

5.4 sawportConfig Object

Fields:
- user.name: Customer name
- user.mobile: Customer phone number
- user.email: Customer email address
- projectId: Enterprise project ID
- baseURL: Dashboard domain
- apiURL: Dashboard API base

5.5 useSawportConfig

React hook to access the config object.

5.6 useSawportContext

Hook to retrieve both config and setConfig.

5.7 mountWidget

Mounts SDK widget into a DOM element.
Usage: mountWidget(config, "sawport-widget")

Summary

This page provides a complete guide for integrating the Sawport Widget across:

CDN-based web apps
React apps
Vue.js apps

It includes configuration references, usage patterns, and API documentation for all widget-related tools.