Skip to main content

Embed Web Chat to Webpage

This article will guide you through the process of deploying a web agent to be embedded into a page on your website. Integration is straightforward and involves copying a code snippet and pasting it into the appropriate section of your website.

Steps to Access Deployment Settings​

  1. Log in to Your NGage 360 Account

    • Visit the NGage 360 website and log in with your credentials.

  2. Navigate to Your Project

    • From the dashboard, go to the Projects section and select the project you wish to manage.

  3. Click on the 'Settings' Button

    • On the project home page, locate and click the Settings button.

  4. Select the 'Deployment Options' Tab

    • Once you're on the Settings page, select the Deployment Options tab.

Enabling Web Platform Deployments​

For web deployments, after enabling the Web Platform option, you will see the different options for integrating the AI agent into your website:

  1. Embed Script:
    • Below the enable/disable option, you will see a code snippet under a section titled 'Embed Settings'. This is the script you need to embed the Chat agent into your webpage. Click on the 'Copy to Clipboard' button below the code snippet to copy the code to your clipboard.

Embedding the Web Agent into Your Website Page​

To integrate the chatbot into a page on your website, follow these steps:

  1. Access Your Website Page's Code:

    • Open the HTML file of your website or the template file if you are using a CMS (Content Management System).

  2. Paste the Code Snippet:

    • Locate the section of your website's page where you wish to embed the web chat agent.
    • Paste the copied code snippet into the section. This ensures that the Web Chat agent script loads correctly when users visit the page.

  3. Save Changes:

    • Save the changes to your HTML file or template file.
    • Upload the updated file to your web server if necessary.

Verifying the Integration​

Once you have integrated the Embed Chat script into your website's page, verify that it is functioning correctly:

  1. Visit Your Page:

    • Open your web browser and navigate to the page on your website.
    • Ensure the Web Chat agent appears in the section you configured.

  2. Test the Agent:

    • Interact with the agent to confirm it responds as expected and that all functionalities are working correctly.

Conclusion​

Deploying and embedding your NGage 360 Web Chat agent into your website's page is a simple process that involves copying a code snippet and pasting it into the right section of your website's page HTML.