`

$3

`html

`

Using the Widget in ReactJS

$3

`bash
yarn add @sawport/react-sdk
`

$3

Wrap your app with SawportContext.Provider:

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

value={{
config: {
baseURL: 'https://{DASHBOARD_HOST_DOMAIN}',
apiURL: 'https://{DASHBOARD_HOST_DOMAIN}/api/v1/',
projectId: 'XXXXXXXXXXXXXX'
}
}}
>


`

$3

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

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

$3

`js
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'
});
`

Using the Widget in Vue.js

$3

`bash
yarn add @sawport/react-sdk
`

$3

`html



`

$3

`vue



`

API Reference: Sawport SDK

$3

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

$3

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

$3

- Function for updating SDK config globally.

$3

- 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

$3

- React hook to access the config object.

$3

- Hook to retrieve both config and setConfig.

$3

- 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.