1.3.0 • Published 5 months ago

@sawport/react-sdk

Licence

—

Version

1.3.0

Deps

Size

13.3 MB

Vulns

Weekly

Summary Dependency Versions

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.

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: 'example@email.com', 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: 'example@email.com', 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: 'example@email.com',
      mobile: '080XXXXXXXXX',
      name: 'Firstname Lastname',
    }
  });
</script>

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>

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

<Widget
  user={{
    email: 'example@email.com',
    mobile: '080XXXXXXXXX',
    name: 'Firstname Lastname'
  }}
/>

3.4 Updating Config at Runtime

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

setSawportConfig({
  user: { 
    email: 'example@email.com',
    mobile: '080XXXXXXXXX',
    name: 'Firstname Lastname'
  },
  baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
  apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
  projectId: 'XXXXXXXXXXXXXX'
});

4.1 Install the SDK

yarn add @sawport/react-sdk

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

<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: 'example@email.com',
      mobile: '2348123456789',
      name: 'Firstname Lastname'
    },
  }, 'sawport-widget')
})
</script>

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

API Reference: Sawport SDK

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.