JavaScript Integration

In case you are not using any build mechanism, you can attach the script directly to the HTML page:

<script src="https://id.authologic.com/js/sdk.umd.cjs"></script>

Within the page, you need to define the place where the process should be displayed:

<div id="authologic"></div>

At the end of the page, before the end of the <body> tag, a script call should be placed in the <script> tag:

AuthologicSDK.init({
  widgetId: "development_only",
  conversationId: "337f640c-66c2-484f-8068-b42b82d491f8",
  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
`divId`	authologic	The identifier of the HTML element in which the SDK will be embedded. Will be used if `element` is not defined.
`element`	-	HTML element in which the SDK will be embedded.
`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
`onRedirect`	window.location.assign(url)	A function whose task is to open the continuation of the process in a new window, if required

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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://id.authologic.com/js/sdk.umd.cjs"></script>
  </head>
  <body>
    <div id="authologic"></div>
    <script>
      AuthologicSDK.init({
        widgetId: "<widgetId>",
        divId: "authologic",
        lang: "pl",
        conversationId: "<conversationId>",
        environment: "sandbox",
        size: {
          height: "700",
          width: "700",
        },
        theme: {
          primary: "#c2d9a9",
          background: "#2c282c",
          text: "#e5cfe5",
          menu: {
            text: "#bebecc",
            background: "#2a252a",
          },
          item: {
            background: "#574d57",
          },
          button: {
            text: "#e5cfe5",
          },
        },
      });
    </script>
  </body>
</html>

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?