Static Site Integration

Learn how to integrate Open Guestbook into static site generators like Hugo, Jekyll, Gatsby, and plain HTML projects.

Ready to Go?

Need help customizing or troubleshooting? Our support team and documentation are always available.

Developer Guides Contact Us

✅ iframe Embed (All Sites)

<iframe 
    src="https://api.openguestbook.tech/embed/guestbook?site_id=YOUR_SITE_ID" 
    class="w-full aspect-video rounded-md shadow-sm" 
    frameborder="0" 
    allowfullscreen>
</iframe>

Replace YOUR_SITE_ID with your unique site identifier from the dashboard.

Best Practices

Use responsive design patterns in your CSS for mobile support
Add CSS transitions for smooth entry animations
Ensure the iframe container has correct aspect ratio for scaling

Styling Tips

Custom styles can be applied via CSS such as:

.openguestbook-iframe {
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.2);
}

🛠 Hugo Integration

Step-by-Step Instructions

Log into your Hugo dashboard and create a new partial layout called guestbook.html
Copy the iframe code from your dashboard and paste it in your layout partial
Include the partial in your content page using:{{" "}}
Build and deploy your site as usual using the hugo` command

🧩 Jekyll Integration

Simple Liquid Setup

Create a new include file in your _includes/guestbook.html with the iframe code, then reference it in your layout with:

{{ "{% include guestbook.html %}" }}

🚀 Gatsby React Component

How to Add

Create a new React component file src/components/guestbook.js with the iframe and include it in your page:

import Guestbook from '../components/guestbook' const IndexPage = () => ( <div><Guestbook /></div> ) export default IndexPage

This allows easy reuse and CSS customization for any Gatsby-based static site.

🔍 Common Questions

Why is the iframe not loading on mobile?

Make sure your iframe div has proper mobile meta viewport tags and responsive CSS. Open Guestbook's guestbooks are mobile-optimized automatically when included with proper HTML and CSS.

Can I style the guestbook?

Yes! Use custom CSS in your static site to match with your theme colors.

Can I use it in any static generator?

The Open Guestbook iframe can be used in any static HTML site — including Jekyll, Hugo, Hexo, Docsify, and Gatsby.