@sawport/react-sdk NPM

Getting Started With Sawport Widget

Web Usage

Pull the Sawport Widget CSS from your HTML head into your web page.

<html>
  <head>
    <link href="https://unpkg.com/@sawport/react-sdk/dist/style.css" rel="stylesheet" />
  ...

Create a div with id of `sawport-widget` that will contain the widget.

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

Pull in the sawport SDK into your website

After pulling the sawport SDK Global variable sawportSDK will be exposed to your webpage which you can access its method and properties.

...
  <script type="module" src="https://unpkg.com/@sawport/react-sdk@latest/dist/index.js"></script>
</body>

Mount the sawport widget when document is fully loaded and with default configurations.

Use the global sawportSDK.mountWidget to mount the widget anytime with the configuration it accepts

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

    docReady(() => sawportSDK.mountWidget({
    	baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
	apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
	projectId: XXXXXXXXXXXXXX,
	user: {email: 'example@emai.lcom', mobile: '080XXXXXXXXX', name: 'Firstname Lastname'}, // optional
    }, 'sawport-widget'))
  </script>
</body>

Setting up enterprise credentials

Call the Sawport function setSawportConfig to set the enterprise credential.

docReady(() => sawportSDK.setSawportConfig({
	baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
	apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
	projectId: XXXXXXXXXXXXXX,
	user: {email: 'example@emai.lcom', mobile: '080XXXXXXXXX', name: 'Firstname Lastname'}
  })
 )

Usage In REACTJS

Install the SDK

yarn add @sawport/react-sdk

Configuring The Widget

You may configure the widget by passing object of config to the SawportContext.Provider.

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

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

Using The Widget

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

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

Updating SDK Configuration

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

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

Usage In VUEJS

Pull in Sawport SDK from the project's index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <!-- ADD SAWPORT SDK CSS	   -->
    <link href="https://unpkg.com/@sawport/react-sdk/dist/style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <!-- CREATE A DIV TO HOLD SAWPORT WIDGET	   -->
    <div id="sawport-widget"></div>
    <!-- ADD SAWPORT SDK JS	   -->
    <script type="module" src="https://unpkg.com/@sawport/react-sdk@latest/dist/index.js"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Mounting Sawport SDK From Your Vuejs APP

You need to mount the widget from your vuejs app any time and any where. By pulling the Sawport SDK, sawportSDK variable would be exposed to your vuejs app globally.

<script setup>
import HelloWorld from './components/HelloWorld.vue'

console.log({sawportSDK});

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

// sawportSDK is globally accessible
// Call Once
sawportSDK.mountWidget({
  baseURL: dashboardUrl,
	apiURL: `${dashboardUrl}/api/v1/`,
	projectId: 'XXXXXXXXXXXXXX',
	user: {email: 'example@email.com', mobile: '2348123456789', name: 'Firstname Lastname'}, // optional
}, 'sawport-widget')
</script>

<template>
    <div class="wrapper">
      <!-- YOU MAY ADD DIV WITH ID ANYWHERE TO HOLD THE SAWPORT WIDGET -->
      <!-- <div id="sawport-widget"></div> -->
      <HelloWorld msg="You did it!" />
    </div>
</template>