Creating Reservation Chatbots with ChatGPT - AI Auto-Scheduling System

Releasing Your Created Chatbot to the World

You've worked hard creating a chatbot. Friends liked it, testing is complete.

Now what? You need to add it to your blog or website!

"But... how?"

Don't worry. Today I'll show you how to add chatbots to websites even without coding knowledge.

Types of Chatbot Embedding Methods

1. Widget Form (Easiest)

Floating chat button in bottom right

2. Inline Form

Embedded as box within page

3. Full Page

Separate page with just chatbot

4. Link Sharing

Just share URL

Method 1: Link Sharing (Simplest)

No coding needed. Just a link and you're done!

ChatGPT Custom GPT Link

Steps:

1. Open Custom GPT page
2. Share button in top right
3. Select "Anyone with the link"
4. Copy link

Add to Blog Post:

## Shopping Assistant Chatbot

Ask your questions!

👉 [Chat with Bot](https://chat.openai.com/g/g-xxxxx)

Pros:

• Easiest
• Easy to manage

Cons:

• User needs OpenAI account
• Leaves your site

Poe.com Bot Link

Steps:

1. Open bot page on Poe
2. Click share icon
3. Copy link

Add as Button to Blog:

<a href="https://poe.com/YourBotName"
   style="background: #FF6B6B;
          color: white;
          padding: 12px 24px;
          border-radius: 8px;
          text-decoration: none;
          display: inline-block;">
   💬 Chat with Bot
</a>

Pros:

• Free
• Simple

Cons:

• Needs Poe account
• Limited branding

Method 2: iframe Embed

Embed directly in webpage

Basic iframe Code

<iframe
  src="ChatbotURL"
  width="100%"
  height="600px"
  style="border: 1px solid #ddd; border-radius: 8px;">
</iframe>

Make it Pretty

<div style="max-width: 800px; margin: 40px auto;">
  <h2 style="text-align: center; margin-bottom: 20px;">
    💬 AI Assistant
  </h2>
  <iframe
    src="https://poe.com/YourBot"
    width="100%"
    height="600px"
    style="border: 2px solid #4A90E2;
           border-radius: 12px;
           box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  </iframe>
  <p style="text-align: center; color: #666; margin-top: 10px;">
    Ask me anything!
  </p>
</div>

Make it Responsive

Works well on mobile too:

<style>
.chatbot-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chatbot-iframe {
  width: 100%;
  height: 600px;
  border: 2px solid #4A90E2;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .chatbot-iframe {
    height: 500px;
  }
}
</style>

<div class="chatbot-container">
  <iframe
    class="chatbot-iframe"
    src="https://your-chatbot-url">
  </iframe>
</div>

Method 3: Widget Form (Bottom Right Button)

Most professional method

Creating Simple Widget

<!-- Floating button -->
<button id="chatbot-button" onclick="toggleChatbot()">
  💬
</button>

<!-- Chatbot window -->
<div id="chatbot-widget" style="display: none;">
  <div id="chatbot-header">
    <span>AI Assistant</span>
    <button onclick="toggleChatbot()">✕</button>
  </div>
  <iframe src="https://your-chatbot-url"></iframe>
</div>

<style>
#chatbot-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #4A90E2;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s;
}

#chatbot-button:hover {
  transform: scale(1.1);
}

#chatbot-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 380px;
  height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

#chatbot-header {
  background: #4A90E2;
  color: white;
  padding: 15px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chatbot-header button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

#chatbot-widget iframe {
  flex: 1;
  border: none;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 768px) {
  #chatbot-widget {
    width: calc(100% - 40px);
    height: calc(100% - 140px);
  }
}
</style>

<script>
function toggleChatbot() {
  const widget = document.getElementById('chatbot-widget');
  if (widget.style.display === 'none') {
    widget.style.display = 'flex';
  } else {
    widget.style.display = 'none';
  }
}
</script>

Result

A 💬 button appears in bottom right, click to open chatbot window!

Method 4: Adding to WordPress Blog

For WordPress users:

Using Plugins

Recommended Plugins:

1. WP Chatbot - Free, simple
2. Tidio - Pretty, paid
3. Custom HTML Widget - For iframe

Installation:

1. WordPress admin page
2. Plugins > Add New
3. Search "chatbot"
4. Install & Activate

Using Custom HTML

1. Appearance > Widgets
2. Add "Custom HTML" widget
3. Place in desired location
4. Paste HTML code above

Creating Full Page

1. Pages > Add New
2. Title: "AI Chatbot"
3. Add Block > Custom HTML
4. Enter iframe code
5. Publish

<div style="width: 100%; height: 800px;">
  <iframe
    src="https://your-chatbot-url"
    width="100%"
    height="100%"
    style="border: none;">
  </iframe>
</div>

Method 5: Adding to Notion Page

Using Notion blog?

Steps:

1. Open Notion page
2. Type /embed
3. Paste chatbot URL
4. Adjust size

Example:

/embed https://poe.com/YourBot

Tip:

• Set to full width
• Height around 600px

Method 6: Tistory Blog

HTML Editing

1. Write post
2. Switch to "HTML" in top right
3. Enter code

<div style="text-align: center; margin: 40px 0;">
  <h3>💬 Chat with AI Bot</h3>
  <iframe
    src="https://your-chatbot-url"
    width="100%"
    height="600px"
    style="max-width: 800px;
           border: 2px solid #ddd;
           border-radius: 8px;">
  </iframe>
</div>

Fixed in Sidebar

1. Admin > Design > Edit Skin
2. Edit HTML
3. Add code to sidebar section

<div class="sidebar-chatbot">
  <h4>💬 Ask Questions</h4>
  <a href="https://your-chatbot-url" target="_blank">
    Open Chatbot
  </a>
</div>

Method 7: Custom Domain

To do it really professionally:

Create Subdomain

chat.yourdomain.com → Chatbot page

Simple HTML Page

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Chatbot</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      text-align: center;
      color: white;
      padding: 20px 0;
    }

    header h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
    }

    header p {
      font-size: 1.2em;
      opacity: 0.9;
    }

    .chatbot-frame {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      overflow: hidden;
      margin-top: 20px;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 1.8em;
      }

      header p {
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>💬 AI Assistant</h1>
      <p>Ask me anything. Available 24/7.</p>
    </header>

    <div class="chatbot-frame">
      <iframe src="https://your-chatbot-url"></iframe>
    </div>
  </div>
</body>
</html>

Free Hosting with GitHub Pages

1. Create GitHub repository
2. Upload index.html
3. Settings > Pages
4. Deploy complete!

URL: https://username.github.io/repo-name

Real Examples

Example 1: Simple Button

<div style="text-align: center; margin: 40px 0;">
  <a href="https://chat.openai.com/g/g-xxxxx"
     target="_blank"
     style="display: inline-block;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 16px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: transform 0.2s;">
    💬 Chat with AI Bot
  </a>
</div>

Example 2: Card Style

<div style="max-width: 600px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
  <div style="text-align: center;">
    <div style="font-size: 48px; margin-bottom: 16px;">
      💬
    </div>
    <h3 style="margin-bottom: 12px;">AI Shopping Assistant</h3>
    <p style="color: #666; margin-bottom: 24px;">
      From product recommendations to orders
    </p>
    <a href="https://your-chatbot-url"
       target="_blank"
       style="display: inline-block;
              background: #4A90E2;
              color: white;
              padding: 12px 24px;
              border-radius: 6px;
              text-decoration: none;">
      Start Chat →
    </a>
  </div>
</div>

Example 3: Minimal Design

<style>
.chat-card {
  border-left: 4px solid #4A90E2;
  padding: 20px;
  background: #f8f9fa;
  margin: 30px 0;
}

.chat-card h4 {
  color: #333;
  margin-bottom: 8px;
}

.chat-card p {
  color: #666;
  margin-bottom: 16px;
}

.chat-link {
  color: #4A90E2;
  text-decoration: none;
  font-weight: 500;
}

.chat-link:hover {
  text-decoration: underline;
}
</style>

<div class="chat-card">
  <h4>💬 Have Questions?</h4>
  <p>Ask the AI chatbot. Instant responses.</p>
  <a href="https://your-chatbot-url" class="chat-link">
    Open Chatbot →
  </a>
</div>

Precautions

1. Loading Speed

iframes can slow down pages.

Solution:

<!-- Use lazy loading -->
<iframe
  src="https://your-chatbot-url"
  loading="lazy">
</iframe>

2. Mobile Optimization

Display well on small screens too:

@media (max-width: 768px) {
  .chatbot-widget {
    width: 100% !important;
    height: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

3. Privacy Protection

If chatbot collects personal info, notice required:

<p style="font-size: 12px; color: #999;">
  * This chatbot may collect conversation content for improvement.
  See <a href="/privacy">Privacy Policy</a> for details.
</p>

4. Accessibility

Make it accessible for keyboard users too:

<button
  id="chatbot-button"
  aria-label="Open chatbot"
  onclick="toggleChatbot()">
  💬
</button>

Adding Analytics

Want to know how much it's used?

<script>
// Track chatbot clicks
document.getElementById('chatbot-button').addEventListener('click', function() {
  // Google Analytics
  if (typeof gtag !== 'undefined') {
    gtag('event', 'chatbot_open', {
      'event_category': 'engagement',
      'event_label': 'chatbot'
    });
  }

  // Or simply
  console.log('Chatbot opened');
});
</script>

Troubleshooting

iframe Won't Display

Cause: Some sites block iframe embedding.

Solution:

• Share via link instead
• Or self-host

Looks Strange on Mobile

Cause: Lack of responsive CSS

Solution:

@media (max-width: 768px) {
  /* Add mobile styles */
}

It's Slow

Cause: iframes are heavy

Solution:

• Use lazy loading
• Load only when needed (on button click)

function loadChatbot() {
  const iframe = document.createElement('iframe');
  iframe.src = 'https://your-chatbot-url';
  document.getElementById('chatbot-container').appendChild(iframe);
}

Next Steps

In the next post, we'll cover creating "custom chatbots" by injecting training data.

Learn how to create real expert chatbots by training on your blog posts, PDFs, and data!

Wrapping Up

Adding chatbots to blogs isn't as hard as you think.

Easiest way:

1. Link sharing

A bit fancier: 2. iframe embed

Like a pro: 3. Widget form

Choose the method that fits your situation. Start simple and upgrade gradually!

Add your chatbot to your blog today!

---

Related Posts:

• [Previous] Testing with Friends
• [Next] Creating "Custom Chatbots" by Injecting Training Data

How did you embed yours? Share in comments!