# Integration Within React Applications

If you are building your application using [React](https://react.dev/), you must first add the Authologic library to your dependencies:

```shell
npm i @authologic/websdk-react
```

The next step is to import the library:

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

and using the component in the page:

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

<warning>

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.

</warning>

Possible parameters are described below.

## Mandatory Parameters

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Default value
    </th>
    
    <th>
      Purpose
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        widgetId
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      A dedicated SDK key, associated with the page where the widget is installed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        conversationId
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      The ID of the conversation that should be started
    </td>
  </tr>
</tbody>
</table>

## Optional Parameters

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Default value
    </th>
    
    <th>
      Purpose
    </th>
  </tr>
</thead>

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

Appearance configuration example:

```javascript
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. <br />


The possible options are mentioned in the table below

<table>
<thead>
  <tr>
    <th>
      Category
    </th>
    
    <th>
      Property
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        size
      </strong>
    </td>
    
    <td>
      <code>
        height
      </code>
    </td>
    
    <td>
      Changing the widget height
    </td>
  </tr>
  
  <tr>
    <td>
      
    </td>
    
    <td>
      <code>
        width
      </code>
    </td>
    
    <td>
      Changing the widget width
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        theme
      </strong>
    </td>
    
    <td>
      <code>
        primary
      </code>
    </td>
    
    <td>
      Highlight color when hovering over a button, color of the button to end the conversation (Cancel)
    </td>
  </tr>
  
  <tr>
    <td>
      
    </td>
    
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      The general background color for the widget
    </td>
  </tr>
  
  <tr>
    <td>
      
    </td>
    
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      The default text color used in most areas
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        menu
      </strong>
    </td>
    
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      Main widget background
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        item
      </strong>
    </td>
    
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      The background color of individual items in the interface (for example tiles with country names)
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        button
      </strong>
    </td>
    
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      The color of text displayed on buttons (for example, the start verification button)
    </td>
  </tr>
</tbody>
</table>

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

```javascript
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
```

<note>

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](mailto:tech-support@authologic.com)

</note>