Skip to main content

Web Integration

This guide will help you connect your website with Conductify AI Agent. Follow these steps to ensure a smooth and successful integration process.

Part 1: Setup in Conductify AI Studio​

Step 1: Access Conductify AI Studio​

Step 2: Add Integration​

  • On the Homepage, select Integrations from the left menu and click the Add Integration button

  • A new window will appear with 2 required fields to create a new Integration:

    • Integration Name: Name of the Integration, can be customized (example: "example.com website")
    • Integration Type: Select "Web"

  • After setup is completed, click the Create button to create the Integration

Step 3: Configure Integration​

Note

Ensure that Integration is fully functional and productive, you must have 1 AI Agent created beforehand.

  • After successfully creating the Integration, click the settings icon to configure the Integration

  • In the configuration interface, there are 2 steps to complete the setup:

    • Connect Agent: Link to an existing Agent
    • Settings: Set the operating hours for the Integration

  • After completing the steps, click the Save button to save the configuration

Step 4: Copy Integration Code​

  • After saving the configuration, copy the code provided in Embed Code to embed in your website

Part 2: Setup in Website​

Step 1: Embed Integration Code to Website​

  • Paste the copied code into your website, just before the closing </body> tag

Step 2: Widget Chat Configuration​

  • Add the following code to configure the Widget Chat:
window.BreadsConfig = {
  customIconUrl:
    "https://cdn.jsdelivr.net/gh/ConductifyAI/conductify-integration-scripts/production/logo_conductify.png",
  primaryColor: "#172554",
  styles: {
    toggleContainer: {
      bottom: "10px",
      right: "10px",
    },
  },
};

Property Explanations:​

PropertyDescription
customIconUrlURL path to custom widget chat icon. If not set, widget will use default icon
primaryColorPrimary color used in widget chat. Can use HEX, RGB or CSS color names
styles.toggleContainer.bottomDistance in pixels from bottom of screen (e.g., "10px")
styles.toggleContainer.rightDistance in pixels from right side of screen (e.g., "10px")
Note

All configurations above are optional. If not configured, the widget chat will use default values.