BobBuilds
Docs/JS Embed

JS Embed

Add one <script> tag to any website — no backend, no build tools, no framework required. Works on Webflow, Squarespace, WordPress, Framer, Wix, or any static HTML page. The script fetches your published blogs from BobBuilds and renders them directly into a container you specify.

Quick start

1. Add a container element

<div id="blog-list"></div>

2. Add the script tag (just before </body>)

<script
 src="https://app.bobbuilds.ai/embed.js"
 data-key="bb_live_your_api_key"
 data-mode="list"
 data-container="#blog-list"
 data-limit="10"
 data-theme="auto"
></script>

3. That's it. Blogs appear automatically.

Attributes

AttributeDefaultDescription
data-keyrequired—Your BobBuilds API key (bb_live_...)
data-mode"list""list" renders a blog index. "single" renders one post by slug.
data-slug—Required when data-mode="single". The blog slug to render.
data-container"#bobbuilds-blog"CSS selector for the mount element.
data-limit10Max blogs shown in list mode. Maximum 100.
data-theme"light""light", "dark", or "auto" (follows system preference).
data-apiautoOverride API base URL. Defaults to the script's own origin.

Mode: list

Renders a grid of blog cards linking to /blog/[slug]. Use this on your blog index page.

<!-- Blog index page -->
<section>
 <h2>Our Blog</h2>
 <div id="blog-list"></div>
</section>

<script
 src="https://app.bobbuilds.ai/embed.js"
 data-key="bb_live_xxx"
 data-mode="list"
 data-container="#blog-list"
 data-limit="12"
 data-theme="light"
></script>

Mode: single

Renders a full blog post by slug. Use on your individual blog post pages. Injects JSON-LD and FAQPage schema automatically.

<!-- Individual blog post page: /blog/best-crm-for-startups -->
<div id="blog-post"></div>

<script
 src="https://app.bobbuilds.ai/embed.js"
 data-key="bb_live_xxx"
 data-mode="single"
 data-slug="best-crm-for-startups"
 data-container="#blog-post"
></script>

<!-- With dynamic slug from the URL -->
<script>
 // Extract slug from URL path: /blog/best-crm-for-startups → best-crm-for-startups
 const slug = window.location.pathname.split("/blog/")[1]?.replace(/\/+$/, "");
 if (slug) {
 const s = document.createElement("script");
 s.src = "https://app.bobbuilds.ai/embed.js";
 s.setAttribute("data-key", "bb_live_xxx");
 s.setAttribute("data-mode", "single");
 s.setAttribute("data-slug", slug);
 s.setAttribute("data-container", "#blog-post");
 document.head.appendChild(s);
 }
</script>

Single mode automatically:

  • Sets <title> and meta description from SEO metadata
  • Injects JSON-LD from the blog's schema markup
  • Injects FAQPage schema if the blog has FAQs
  • Renders cover image, published date, and full HTML content

Platform guides

Webflow

  1. Add a "Div Block" where you want the blog listing
  2. Give it the ID: blog-list
  3. Go to Site Settings → Custom Code → "Footer Code"
  4. Paste the script tag with data-container="#blog-list"

WordPress

  1. Install "Insert Headers and Footers" plugin
  2. Create a new page for /blog
  3. Add a Custom HTML block with <div id="blog-list"></div>
  4. Add the script tag to the footer section

Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Add the script tag to the Footer section
  3. Add a Code block with <div id="blog-list"></div> on your blog page

Static HTML

  1. Add <div id="blog-list"></div> where you want the listing
  2. Add the script tag before </body>
  3. Open the page in a browser — blogs load automatically

Customising the appearance

The embed uses a minimal stylesheet with class names prefixed bb-. Override any of them in your own CSS:

/* Blog listing card */
.bb-card { border-radius: 16px; border-color: #e5e7eb; }
.bb-card-title { font-family: "Your Font", sans-serif; font-size: 1.1rem; }
.bb-card-desc { color: #6b7280; }

/* Article content */
.bb-article h1 { font-size: 2rem; }
.bb-article h2 { color: #111; }
.bb-article p { line-height: 1.8; }

/* FAQ section */
.bb-faqs { background: #f9fafb; padding: 2rem; border-radius: 12px; }

/* Hide "Powered by BobBuilds" */
.bb-powered { display: none; }

Security

Client-side API key exposure

The embed script uses your API key client-side. By design, this key is read-only — it can only fetch published blogs, never create, edit, or delete them. Do not embed a key created with write access in client-side code. Create a dedicated "Website embed" key from the Blogs → API & Connect tab.

← REST APICLI Reference →