Ghost Integration Guide

QuackChat on Ghost

Add the QuackChat widget to your Ghost blog or publication using code injection.

Quick Start (TL;DR)

1. Go to Settings > Code injection
2. Paste the widget code in Site Footer
3. Save

Prerequisites

• Ghost admin access
• Bot ID from your QuackChat dashboard

Step-by-Step Installation

Option A: Code Injection (Recommended)

1. Log into your Ghost admin panel
2. Click the gear icon (Settings) in the left sidebar
3. Scroll down and click Code injection
4. In the Site Footer section, paste:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>

5. Click Save

The widget will appear on all pages of your Ghost site.

Option B: Theme Integration (Advanced)

For theme developers who want deeper integration:

1. Navigate to your theme files
2. Open default.hbs (main layout)
3. Add the widget code before </body>
4. Upload the modified theme

Note: Theme changes may be overwritten on theme updates.

Platform-Specific Customization

Match Ghost Theme

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-primary-color="#15171A"
  data-theme="minimal"
></script>

Dark Theme for Ghost's Dark Mode

If your Ghost theme supports dark mode:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-theme="dark"
></script>

Verification

Quick test:

1. Visit your Ghost site
2. Look for the chat bubble in the bottom-right corner
3. Test sending a message

Troubleshooting

Widget doesn't appear after saving

Cause: Browser cache or Ghost cache.

Solution:

• Clear your browser cache
• Try incognito mode
• Wait a minute for Ghost's cache to clear

Widget conflicts with Ghost newsletter popup

Cause: Both elements may overlap.

Solution: Use data-position="bottom-left" in the widget code.

Known Limitations

• Code injection is site-wide (can't exclude specific pages via UI)
• For per-page control, modify theme files