Integration Within React Applications

If you are building your application using React(opens in new tab), you must first add the Authologic library to your dependencies:

npm i @authologic/websdk-react

The next step is to import the library:

import { AuthologicWidget, Theme } from "@authologic/websdk-react";

and using the component in the page:

<AuthologicWidget widgetId="<widget ID>" conversationId="<conversation ID>" environment="sandbox" />

For testing, the widgetId property can be set to development_only as shown in the above example. It will disable security and will only work in the sandbox environment. You will receive the widgetId value that can be used in production during onboarding.After providing Authologic with the website address, you will receive the widget ID (widgetId) necessary to run the integration in a production environment.

Possible parameters are described below.

Mandatory Parameters

Name	Default value	Purpose
`widgetId`	-	A dedicated SDK key, associated with the page where the widget is installed
`conversationId`	-	The ID of the conversation that should be started

Optional Parameters

Name	Default value	Purpose
`environment`	production	The environment that will be used for the connection. Available values: production, sandbox
`lang`	determined based on the browser	The two-letter interface language code, for example: `PL`
`theme`	determined by account configuration	Interface appearance. By default, it is configured on the Authlogic account side (see below)
`size`	{height: "650", width: "650"}	The screen size that the widget should occupy

Appearance configuration example:

theme: {
    primary: '#00ffb2',
    secondary: '#88ff00',
    background: '#a6715e',
    text: '#073d07',
    menu: {
        text: '#911111',
        background: '#a6715e'
    },
    item: {
        background: '#a6715e'
    },
    button: {
        text: '#021772'
    }
}

Theme Appearance Adjustment Options

Our widget supports modification of its appearance via the properties nested inside the theme option.
The possible options are mentioned in the table below

Category	Property	Description
size	`height`	Changing the widget height
	`width`	Changing the widget width
theme	`primary`	Highlight color when hovering over a button, color of the button to end the conversation (Cancel)
	`background`	The general background color for the widget
	`text`	The default text color used in most areas
menu	`background`	Main widget background
item	`background`	The background color of individual items in the interface (for example tiles with country names)
button	`text`	The color of text displayed on buttons (for example, the start verification button)

Below is an example of a full page definition using the composition API:

import {AuthologicWidget, Theme} from "@authologic/websdk-react";

const theme: Theme = {
    button: {
        text: "#e5cfe5"
    },
    menu: {
        background: "#537743",
        text: "#e5cfe5"
    },
    primary: "#537743",
    background: "#242424",
    secondary: "#c9afd2",
    text: "#537743",
    item: {
        background: "#e5cfe5"
    }
}

function App() {
    return (
        <>
          <div>
              <AuthologicWidget
                  widgetId="development_only"
                  conversationId="3fccdba0-8ff7-407b-93a0-1f2f7ea4855b"
                  environment="sandbox"
                  theme={theme}
              />
          </div>
        </>
    )
}

export default App

Despite our sincere intentions, it is difficult to create perfect technical documentation. If you have an idea on how to improve this documentation, or you have trouble understanding any section, please email us at tech-support@authologic.com

Was this page helpful?