Basic Integration

If you have direct access to your website's HTML code, you can easily add your Cloudpresser AI chatbot:

Standard Method

Follow these steps to add your chatbot to any HTML website:

Get your chatbot code:
- Go to your Cloudpresser AI Chat dashboard
- Select the chatbot you want to integrate
- Click on the "View Code" or "Integration" button
- Copy the provided code snippet
Add the code to your website:
- Open your website's HTML file(s) in a code editor
- Locate the <head> section
- Paste your chatbot code just before the closing </head> tag
- Save the file(s)
- Upload the updated file(s) to your web server

Example HTML Integration

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Your existing head content -->
    <link rel="stylesheet" href="styles.css">

    <!-- Cloudpresser AI Chat integration code -->
    <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>
</head>
<body>
    <!-- Your website content -->
    <h1>Welcome to My Website</h1>
    <p>This is my website content.</p>
</body>
</html>

Advanced Integration Options

For more control over when and how the chatbot loads:

Lazy Loading

If you want to load the chatbot only after the page has fully loaded:

<script>
  window.addEventListener('load', function() {
    // Create script element
    var script = document.createElement('script');
    script.src = 'https://cloudpresserai.com/chatbot-widget.js';
    script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
    script.async = true;

    // Append to head
    document.head.appendChild(script);
  });
</script>

Conditional Loading

If you want to load the chatbot only on certain pages or under certain conditions:

<script>
  // Example: Only load on pages that aren't the contact page
  if (!window.location.pathname.includes('/contact')) {
    var script = document.createElement('script');
    script.src = 'https://cloudpresserai.com/chatbot-widget.js';
    script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
    script.async = true;
    document.head.appendChild(script);
  }
</script>

Tip: If you're using a content management system (CMS) or website builder, check our specific integration guides for those platforms instead of using these manual HTML methods.

Troubleshooting

Chatbot not appearing on the site

Ensure the code was added correctly to the <head> section. Check your browser's developer console for any JavaScript errors.

Script loading issues

If the script fails to load, check your internet connection and make sure there are no content security policies blocking the script.

Conflicts with other scripts

If you have other chatbots or similar widgets, they might conflict with Cloudpresser AI Chat. Try temporarily disabling them to test.

Need Help?

If you're experiencing issues with the HTML/JavaScript integration, please contact our support team at [email protected].

HTML/JavaScript Integration Guide