Embedding the OKCHAT.AI chatbot widget on your website is a straightforward process that enhances user interaction by providing instant support. Follow this guide to customize and integrate the widget seamlessly.

​
Step 1: Access the Widget Snippet Generator

  1. Navigate to the Widget Section:

    • Log in to your OKCHAT.AI account.
    • Go to the “Chatbot Configurations” section.
    • Select “Chat Widget” from the sidebar.

  2. Customize Your Widget:

    • Header: Choose a name for your chatbot that will be displayed in the widget header.
    • Primary Color: Select a primary color that matches your website’s theme.
    • Chatbot Logo URL: Provide a URL for the chatbot logo. Ensure the image is hosted and accessible online.
    • Chatbot Slogan: Add a catchy slogan that encourages users to interact with the chatbot.
    • Secondary Color: Choose a secondary color for additional UI elements.
    • Language: Set the language to “auto” for automatic detection based on user preferences.

​
Step 2: Generate the Widget Snippet

  1. Review Customizations:

    • Ensure all fields are correctly filled out.
    • Preview the widget to see how it will appear on your website.

  2. Generate Snippet:

    • Click on the “Generate Snippet” button.
    • A script tag will be generated with your custom configurations.
    <script
  src="https://v2.okchat.at/chatbot-enh6d.js"
  data-chatbot-id="Safeffed-5f42-4552-a993"
  data-header="A! AGENT"
  data-logo="img.jpg"
  data-name="OKCHATA"
  data-slogan="Chat with us"
  data-primary-color="#000000"
  data-secondary-color="#ffffff"
  data-language="auto"
></script>

​
Step 3: Embed the Widget on Your Website

  1. Copy the Snippet:

    • Highlight the generated script tag and copy it to your clipboard.

  2. Paste the Snippet:

    • Open your website’s HTML file where you want the widget to appear.
    • Paste the script tag just before the closing </body> tag.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Website</title>
  </head>
  <body>
    <!-- Your website content -->
    <script
      src="https://v2.okchat.at/chatbot-enh6d.js"
      data-chatbot-id="Safeffed-5f42-4552-a993"
      data-header="A! AGENT"
      data-logo="img.jpg"
      data-name="OKCHATA"
      data-slogan="Chat with us"
      data-primary-color="#000000"
      data-secondary-color="#ffffff"
      data-language="auto"
    ></script>
  </body>
</html>

  3. Save and Publish:

    • Save the changes to your HTML file.
    • Publish or upload the updated file to your web server.

​
Step 4: Test the Widget

  1. Open Your Website:

    • Navigate to your website in a web browser.
    • Ensure the widget appears correctly and is functional.

  2. Interact with the Chatbot:

    • Test the chatbot by asking questions or initiating a conversation.
    • Verify that the responses are accurate and the widget behaves as expected.

​
Troubleshooting

  • Widget Not Appearing:

    • Ensure the script tag is correctly placed before the closing </body> tag.
    • Check for any JavaScript errors in the browser console.

  • Customization Issues:

    • Double-check the URLs and color codes in the snippet.
    • Ensure all required fields are filled out in the snippet generator.

​
Conclusion

By following these steps, you can successfully embed and customize the OKCHAT.AI chatbot widget on your website. This integration will enhance user engagement and provide instant support, improving overall user experience.

Happy embedding!