Home/Dashboard/Embed Docs

Embed OpenBlog on Your Site

Add a powerful AI-powered blog assistant to any website with a single line of code. Your visitors can explore your posts, discover related content, and chat with the AI assistant.

Quick Start

Basic Embed
<script src="https://yourdomain.com/widget.js" data-site="YOUR_SITE_ID"></script>

Paste this snippet before the closing </body> tag of your website. Replace YOUR_SITE_ID with your site ID from the dashboard.

Configuration Options

AttributeValuesDescription
data-siteUUIDYour site ID from the dashboard (required)
data-positionbottom-right | bottom-leftPosition of the floating button (default: bottom-right)
data-themeauto | dark | lightWidget theme (default: auto, follows system preference)

Examples

Bottom-Left Position
<script src="https://yourdomain.com/widget.js" data-site="YOUR_SITE_ID" data-position="bottom-left"></script>
Force Dark Theme
<script src="https://yourdomain.com/widget.js" data-site="YOUR_SITE_ID" data-theme="dark"></script>
Inline Embed (No Floating Button)
<div id="openblog-portal"></div>
<script src="https://yourdomain.com/widget.js" data-site="YOUR_SITE_ID"></script>
The inline embed renders directly in the page where you place the div, instead of as a floating widget.

WordPress Integration

WordPress footer.php
<!-- Add to your WordPress theme's footer.php before </body> -->
<script src="https://yourdomain.com/widget.js" data-site="YOUR_SITE_ID"></script>

Option 1: Edit your theme's footer.php and add the script before </body>.

Option 2: Use a plugin like "Insert Headers and Footers" to add the script to your footer.

Option 3: Use a Custom HTML block in the WordPress editor for inline embedding.

How the Widget Works

Blog Tab (Default)

Shows your latest blog posts from the host domain. Preserves your site's branding and keeps visitors engaged with YOUR content first.

Explore Tab

Displays related posts from across the OpenBlog network, helping visitors discover relevant content from other bloggers.

Chat Tab

AI-powered assistant that can explore topics, find posts, and answer questions about the blogosphere.

Troubleshooting

Widget not appearing

Make sure the script is loaded before </body>. Check your browser console for errors. Ensure your site ID is correct.

Blog not detected / showing "No indexed posts"

Your blog needs to be added and crawled in the dashboard first. Add your site, trigger a crawl, and the widget will pick up your posts.

Mixed content warnings (HTTPS/HTTP)

The widget script must be loaded over HTTPS. Make sure your site uses HTTPS, and the script src URL uses https://.

Content Security Policy (CSP) blocking

Add our domain to your CSP headers: frame-src https://yourdomain.com; script-src https://yourdomain.com;

CORS errors in console

The widget communicates via postMessage which does not require CORS. If you see CORS errors, they may be from API calls — ensure your site is verified in the dashboard.

Ready to embed?

Get your site ID from the dashboard and start embedding.