Integrations

Embed JS Integration

The Blogree Embed script allows you to display your Blogree blog directly on any HTML page— no matter what platform it's on. Just add a simple script tag and you're done!

Perfect for: WordPress, Wix, Squarespace, static HTML sites, or any website that supports custom HTML/JavaScript.

Estimated setup time: 2 minutes

Why Use Embed JS?

✅ Zero Configuration — No API setup or database needed
✅ Works Anywhere — Any website platform or hosting
✅ Isolated Styling— Our CSS won't break your site's design (Shadow DOM)
✅ Built-in Features — Pagination, search, lightbox modal included
✅ Fully Responsive — Works perfectly on mobile, tablet, and desktop
✅ Live Updates — Posts appear automatically when published in Blogree

Step 1: Get Your API Key

First, you need your Blogree API key:

Log in to your Blogree Dashboard
Go to Sites and select your site
Go to Settings
Find the Pull API Key
Copy this key— you'll need it in the next step

Step 2: Add the HTML Container

Add a <div> element where you want your blog to appear on your website:

html

<div id="blogree-root" 
     data-api-key="pk_your_api_key_here" 
     data-api-url="https://api.blogree.com"
     data-limit="6">
</div>

Replace: pk_your_api_key_here with the API key you copied in Step 1.

Where to put this: Inside the <body> tag wherever you want the blog posts to appear.

Step 3: Add the Script Tag

Add this script tag just before the closing </body> tag on your page:

html

<script src="https://api.blogree.com/blogree-embed.js"></script>

Step 4: That's It!

Your blog should now appear on your page! The embed will automatically:

✅ Fetch your latest posts from Blogree
✅ Display them in a beautiful grid
✅ Add a "Load More" button for pagination
✅ Open posts in a modal when clicked

Complete Example

Here's a complete HTML page with the Blogree embed:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Latest Articles</h1>
        
        <!-- Blogree Embed Container -->
        <div id="blogree-root" 
             data-api-key="pk_your_api_key_here" 
             data-api-url="https://api.blogree.com"
             data-limit="6">
        </div>
    </div>

    <!-- Blogree Embed Script -->
    <script src="https://api.blogree.com/blogree-embed.js"></script>
</body>
</html>

Customization

Embed Attributes

You can customize the embed with these data attributes:

Attribute	Required	Description	Example
data-api-key	✅ Yes	Your site's unique Pull API Key	pk_live_xxxxx
data-api-url	✅ Yes	Blogree API endpoint	https://api.blogree.com
data-limit	❌ No	Posts per page (default: 6)	12
data-search	❌ No	Show search box (true/false)	true
data-categories	❌ No	Filter by categories	tech,business

Styling with CSS Variables

You can customize colors and styling using CSS custom properties. Add this to your page's <style> tag:

css

#blogree-root {
  /* Brand & Primary Colors */
  --br-primary: #7ecfff;        /* Primary accent color */
  --br-primary-dark: #5eb3d6;   /* Darker primary */
  
  /* Background Colors */
  --br-bg: #ffffff;             /* Card background */
  --br-bg-light: #f5f5f5;       /* Light background */
  --br-bg-darker: #1a1a1a;      /* Darker background */
  
  /* Text Colors */
  --br-text: #333333;           /* Main text color */
  --br-text-light: #666666;     /* Secondary text color */
  --br-text-lighter: #999999;   /* Tertiary text color */
  
  /* Border & Shadow */
  --br-border: #e0e0e0;         /* Border color */
  --br-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Box shadow */
  
  /* Spacing */
  --br-spacing: 24px;           /* Padding/margin */
  
  /* Typography */
  --br-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --br-font-size: 16px;         /* Base font size */
}

Example: Dark Mode Theme

css

#blogree-root {
  --br-primary: #00d4ff;
  --br-bg: #1a1a1a;
  --br-bg-light: #2a2a2a;
  --br-text: #ffffff;
  --br-text-light: #cccccc;
  --br-border: #333333;
  --br-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

Example: Minimal Light Theme

css

#blogree-root {
  --br-primary: #2563eb;
  --br-bg: #ffffff;
  --br-bg-light: #f9fafb;
  --br-text: #111827;
  --br-text-light: #4b5563;
  --br-border: #e5e7eb;
  --br-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Advanced Features

Search

Enable the search box to let visitors find posts:

html

<div id="blogree-root" 
     data-api-key="pk_your_api_key_here" 
     data-api-url="https://api.blogree.com"
     data-search="true">
</div>

Category Filtering

Show only posts from specific categories:

html

<div id="blogree-root" 
     data-api-key="pk_your_api_key_here" 
     data-api-url="https://api.blogree.com"
     data-categories="tech,business,marketing">
</div>

Custom Limit

Show more or fewer posts per page:

html

<div id="blogree-root" 
     data-api-key="pk_your_api_key_here" 
     data-api-url="https://api.blogree.com"
     data-limit="12">
</div>

Troubleshooting

Posts aren't showing up

Check these things:

Is your API key correct? (Should start with pk_)
Are the data-api-key and data-api-url attributes set?
Is the script tag placed correctly?
Check your browser console for errors (F12 → Console tab)

The styling looks wrong

Your website's CSS might be conflicting with the embed. The embed uses Shadow DOM for isolation, but you can customize it further with CSS variables.

The embed is very slow

Check your internet connection and the API status. If many posts are loading, try reducing the data-limit value.

Browser console shows CORS errors

This usually means your API key is invalid or the API URL is incorrect. Verify both values match what's in your Blogree Dashboard.

The modal doesn't open when clicking posts

Make sure the script tag is at the end of your <body> tag. If it's in the <head>, move it to the end.

Testing Your Embed

Here's how to test that everything is working:

Publish a new post in Blogree (make sure it's published, not draft)
Wait 30 seconds for the cache to update
Hard refresh your page (Ctrl+Shift+R or Cmd+Shift+R)
Check if the post appears in the embed
Click on a post to verify the modal opens