❤
npm
Sign UpSign In

@sawport/react-sdk

0.1.0-alpha.82.4 • Public • Published

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>

API References sawportSDK

Widget

Sawport React SDK widget component

Type

  • React Component

Props

SawportContext

Sawport Context for global configuration of the widget

Type

  • React Context Component

Props

value

setSawportConfig

Type

  • Function(config)

Props

sawportConfig

The Sawport configuration object

Type

  • Object

user

  • name: customer name to populate in the widget
  • mobile: customer phone number to populate in the widget
  • email: customer email to populate in the widget

projectId

The Enterprise's ID from the Dashboard

useSawportConfig

The React hook to get access to the Sawport configuration object

Type

  • React Hook - Function()

Return

useSawportContext

React hook for Sawport Context for global configuration of the widget

Type

  • React Context Hook - Function()

Return

mountWidget

Method to mount the Sawport SDK widget in HTML element with id of sawport-widget

Type

  • Function(config)

Props

Readme

Keywords

none

Package Sidebar

Install

npm i @sawport/react-sdk

Weekly Downloads

125

Version

0.1.0-alpha.82.4

License

none

Unpacked Size

6.45 MB

Total Files

5

Last publish

Collaborators

  • etienejames
  • myckhel
  • sawportinc
Try on RunKit
Report malware