DreamStory Blog Widget

Embed recent blog posts on your website with our easy-to-use widget

Live Demo

Auto Layout (Responsive)

Automatically adapts: vertical on mobile, horizontal on desktop

Vertical Layout

Dark Theme

Horizontal Layout

Perfect for wide containers and headers

Grid Layout

Responsive grid that adapts to container width

Installation

Method 1: Simple HTML (Recommended)

Add this script tag to your website and include a div with the data attribute:

<!-- Add this script tag to your HTML head or before closing body tag -->
<script src="https://blog.dreamstorysnap.com/widget.js"></script>

<!-- Add this div where you want the widget to appear -->
<div data-dreamstory-widget></div>

Method 2: JavaScript Initialization

For more control, you can initialize the widget programmatically:

<script src="https://blog.dreamstorysnap.com/widget.js"></script>
<div id="my-blog-widget"></div>

<script>
  DreamStoryWidget.init('#my-blog-widget', {
    limit: 5,
    theme: 'dark',
    showImages: true,
    compact: false
  });
</script>

Configuration Options

Option	Data Attribute	Default	Description
limit	data-limit	5	Number of posts to display
theme	data-theme	light	Theme: 'light' or 'dark'
title	data-title	Recent Posts	Widget header title
category	data-category	null	Filter posts by category
compact	data-compact	false	Use compact layout
showImages	data-show-images	true	Show featured images
showExcerpt	data-show-excerpt	true	Show post excerpts
showDate	data-show-date	true	Show publication dates
showReadTime	data-show-read-time	true	Show reading time
layout	data-layout	auto	Layout: 'vertical', 'horizontal', 'grid', 'auto'
responsive	data-responsive	true	Enable responsive behavior

Usage Examples

Horizontal Layout Example

<div data-dreamstory-widget 
     data-layout="horizontal"
     data-limit="3" 
     data-title="Breaking News"></div>

Grid Layout Example

<div data-dreamstory-widget 
     data-layout="grid"
     data-limit="6" 
     data-compact="true"
     data-title="News Grid"></div>

Responsive Auto Layout

<div data-dreamstory-widget 
     data-layout="auto"
     data-limit="4" 
     data-theme="dark"
     data-title="Adaptive Posts"></div>

Compact Vertical Widget

<div data-dreamstory-widget 
     data-layout="vertical"
     data-limit="3" 
     data-compact="true" 
     data-title="Quick News"></div>

Minimal Widget

<div data-dreamstory-widget 
     data-layout="vertical"
     data-show-images="false" 
     data-show-read-time="false" 
     data-title="Headlines"></div>

Direct API Access

You can also access the raw data directly via our API:

GET https://blog.dreamstorysnap.com/api/widget?limit=5&category=technology

{
  "success": true,
  "posts": [
    {
      "id": "post-id",
      "title": "Post Title",
      "slug": "post-slug",
      "excerpt": "Post excerpt...",
      "publishedAt": "2025-01-01T00:00:00.000Z",
      "category": "technology",
      "featuredImage": "image-url",
      "readingTime": 5,
      "url": "https://blog.dreamstorysnap.com/posts/post-slug"
    }
  ],
  "total": 10,
  "generated": "2025-01-01T00:00:00.000Z"
}