Skip to main content

HTML

What is HTML?​

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure and content of websites by using elements and tags to define headings, paragraphs, links, images, and other content.

🔍 Key Features of HTML​

  1. Simple Structure: Uses tags and elements to define the structure and content of web pages.

  2. Cross-Platform Compatibility: Works across all browsers and devices without additional software.

  3. Easy to Learn: Straightforward syntax that's beginner-friendly and human-readable.

  4. Foundation of the Web: Every website uses HTML as its basic building block.

  5. Integration Ready: Easily integrates with CSS for styling and JavaScript for interactivity.

🧠 Why Use HTML?​

  • Universal browser support
  • Fast loading and lightweight
  • SEO-friendly structure
  • Easy to maintain and update
  • Perfect for simple websites and landing pages

📦 Common Use Cases​

  • Static websites and landing pages
  • Portfolio websites
  • Simple business websites
  • Documentation sites
  • Email templates

HTML is perfect for developers who want to create fast, simple, and effective websites without complex frameworks.

BluBuddy Chatbot Widget Integration with HTML​

Adding BluBuddy to your HTML website is incredibly simple and requires just two lines of code. The chatbot will automatically load and be ready to interact with your visitors.

Prerequisites

  • A basic HTML file or website
  • Your BluBuddy bot ID from the dashboard

Step-by-Step Integration Guide​

Step 1: Get Your Bot ID

  1. Log in to your BluBuddy Dashboard
  2. Navigate to your chatbot settings
  3. Copy your Bot ID (it will look something like: 6867cf85a2c0505515154ecesdadw)

Step 2: Add the Chatbot to Your HTML

Add the following two lines to your HTML file, preferably 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 goes here -->
    <h1>Welcome to My Website</h1>
    <p>This is a sample HTML page with BluBuddy chatbot.</p>

    <!-- BluBuddy Chatbot Integration -->
    <div id="chatbot" botId="YOUR_CHATBOT_ID"></div>
    <script
      defer
      src="https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js"
      type="module"
    ></script>
  </body>
</html>

Step 3: Replace the Bot ID

Replace YOUR_CHATBOT_ID with your actual bot ID from BluBuddy:

<!-- Example with actual bot ID -->
<div id="chatbot" botId="6867cf85a2c0505515154ecesdadw"></div>
<script
  defer
  src="https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js"
  type="module"
></script>

Step 4: Save and Test

  1. Save your HTML file
  2. Open it in your web browser
  3. The BluBuddy chatbot should appear and be ready to interact with visitors

Integration Options​

Place the code just before the closing </body> tag:

    <!-- Your content -->

    <!-- BluBuddy Chatbot -->
    <div id="chatbot" botId="YOUR_CHATBOT_ID"></div>
    <script defer src="https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js" type="module"></script>
</body>
</html>

Option 2: Head Section Integration​

You can also place it in the <head> section, but we recommend the body approach for better performance:

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

  <!-- BluBuddy Chatbot -->
  <script
    defer
    src="https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js"
    type="module"
  ></script>
</head>
<body>
  <!-- Your content -->
  <div id="chatbot" botId="YOUR_CHATBOT_ID"></div>
</body>

Option 3: Multiple Pages​

For websites with multiple pages, add the same code to each HTML file where you want the chatbot to appear:

<!-- On every page where you want the chatbot -->
<div id="chatbot" botId="YOUR_CHATBOT_ID"></div>
<script
  defer
  src="https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js"
  type="module"
></script>

🧪 Troubleshooting Tips​

  • Chatbot not appearing:

    • Check that you've replaced YOUR_CHATBOT_ID with your actual bot ID
    • Ensure both the <div> and <script> tags are present
    • Verify there are no typos in the bot ID

  • Script loading issues:

    • Make sure you have an internet connection (the script loads from CDN)
    • Check browser console for any error messages
    • Ensure the type="module" attribute is included in the script tag

  • Multiple chatbots appearing:

    • Make sure you only have one set of BluBuddy code per page
    • Check that you haven't accidentally duplicated the integration code

Performance Notes​

  • The script uses defer attribute for optimal loading performance
  • The chatbot loads asynchronously and won't block your page content
  • The widget is lightweight and optimized for fast loading

Complete Example​

Here's a complete HTML page with BluBuddy integration:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Business Website</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        line-height: 1.6;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      h1 {
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Welcome to Our Business</h1>
      <p>
        We provide excellent services and are here to help you with any
        questions.
      </p>
      <p>Feel free to use our chatbot for instant support!</p>

      <h2>Our Services</h2>
      <ul>
        <li>Service 1</li>
        <li>Service 2</li>
        <li>Service 3</li>
      </ul>

      <h2>Contact Us</h2>
      <p>Email: info@business.com</p>
      <p>Phone: (555) 123-4567</p>
    </div>

    <!-- BluBuddy Chatbot Integration -->
    <div id="chatbot" botId="YOUR_CHATBOT_ID"></div>
    <script
      defer
      src="https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js"
      type="module"
    ></script>
  </body>
</html>

✅ You're Done!​

The BluBuddy chatbot is now live on your HTML website, ready to engage with your visitors and provide instant support.

Having Trouble? Let's Troubleshoot!​

If your BluBuddy chatbot isn't appearing or functioning properly on your HTML website, try these quick fixes:

  1. Check Bot ID: Ensure you've replaced YOUR_CHATBOT_ID with your actual bot ID from the BluBuddy dashboard
  2. Verify Code Placement: Make sure both the <div> and <script> tags are present in your HTML
  3. Clear Browser Cache: Clear your browser cache and refresh the page
  4. Check Internet Connection: The script loads from a CDN, so ensure you have an active internet connection

If everything is correct and you are still unable to move forward, write to us at hello@blubuddy.io. Our team will reach out to you as soon as possible for troubleshooting your problem.