DinoCMS allows you to display SMS messages from your editors directly on your website. Whether you want a floating widget or inline content, our embed system makes it easy to keep your audience updated in real-time.

Both modes support automatic polling for new messages (every 30 seconds by default), so your content stays fresh without any page reloads.

Get up and running in under 5 minutes with these simple steps.

<script src="https://dinocms.com/js/dino-embed.js" 
        data-dino-token="demo_api_key_xxxxxxxxxxxx"></script>

<!-- Display the latest message -->
<h1 data-dino="latest">Loading...</h1>

<!-- Display a feed of messages -->
<div data-dino="feed">Loading...</div>

Learn how embed tokens work and how your content is secured.

Each site in DinoCMS has a unique embed token - a 64-character string that identifies your site. This token is automatically generated when you create a site and is used to authenticate requests from your website.

demo_api_key_xxxxxxxxxxxx

For security, embed requests are validated against your site's configured domain. The Origin or Referer header must match the domain you've set in your DinoCMS dashboard.

To ensure fair usage and protect against abuse, the embed API is rate-limited to 100 requests per minute per IP address. This is more than enough for normal usage, even with multiple visitors and automatic polling enabled.

If you believe your token has been compromised, you can regenerate it from your site's settings in the DinoCMS dashboard. Warning: This will immediately invalidate the old token, and any existing embeds using it will stop working until you update them with the new token.

The widget mode displays a floating button that expands to show your messages. Perfect for adding messaging without modifying your existing page layout.

Add this script tag to your HTML. The widget will appear automatically based on your dashboard settings.

<script src="https://dinocms.com/js/dino-embed.js" 
        data-dino-token="demo_api_key_xxxxxxxxxxxx"></script>

All widget settings are configured in your DinoCMS dashboard. Changes apply immediately without updating your embed code.

By default, the widget polls for new messages every 30 seconds. To disable this, add the data-dino-poll attribute:

<script src="https://dinocms.com/js/dino-embed.js" 
        data-dino-token="demo_api_key_xxxxxxxxxxxx"
        data-dino-poll="false"></script>

Inline mode lets you display message content directly within your existing HTML elements. Perfect for custom layouts and tighter integration with your site design.

First, include the embed script (same as widget mode), then add data-dino attributes to any HTML elements where you want content to appear.

<!-- Include the script -->
<script src="https://dinocms.com/js/dino-embed.js" 
        data-dino-token="demo_api_key_xxxxxxxxxxxx"></script>

<!-- Display the latest message -->
<h1 data-dino="latest">Loading...</h1>

Replace the element's content with just the latest message text:

<p data-dino="latest">Loading latest update...</p>

Display multiple messages in a styled feed:

<div data-dino="feed">Loading messages...</div>

Customize inline behavior with these data attributes:

Show only the 5 most recent messages:

<div data-dino="feed" data-dino-limit="5">Loading...</div>

Show messages only from a specific editor (use the editor's ID from your dashboard):

<p data-dino="latest" data-dino-editor="123">Loading...</p>

You can have multiple inline elements on the same page:

<!-- Hero section with latest message -->
<h1 data-dino="latest">Loading...</h1>

<!-- Sidebar with recent updates -->
<aside>
    <h3>Recent Updates</h3>
    <div data-dino="feed" data-dino-limit="3">Loading...</div>
</aside>

<!-- Footer with message from specific editor -->
<footer>
    <p data-dino="latest" data-dino-editor="456">Loading...</p>
</footer>

While most users won't need to interact with the API directly (the JavaScript embed handles everything), you can make direct requests if you need custom integrations.

https://dinocms.com/api/embed/demo_api_key_xxxxxxxxxxxx

curl -X GET "https://dinocms.com/api/embed/demo_api_key_xxxxxxxxxxxx/config" \
     -H "Accept: application/json"

{
  "site": {
    "name": "My Website"
  },
  "settings": {
    "type": "widget",
    "widget": {
      "position": "bottom-right",
      "theme": "light",
      "primaryColor": "#4F46E5",
      "mode": "latest",
      "feedLimit": 10,
      "openByDefault": false,
      "title": "Messages",
      "buttonIcon": "chat"
    },
    "inline": {
      "type": "latest",
      "feedLimit": 5
    }
  }
}

curl -X GET "https://dinocms.com/api/embed/demo_api_key_xxxxxxxxxxxx/messages?type=feed&limit=5" \
     -H "Accept: application/json"

{
  "site": {
    "name": "My Website"
  },
  "messages": [
    {
      "id": 123,
      "content": "Hello from the editor!",
      "editor": {
        "id": 1,
        "name": "John Doe"
      },
      "created_at": "2026-01-11T12:00:00+00:00",
      "formatted_date": "Jan 11, 2026",
      "formatted_time": "12:00 PM",
      "formatted_datetime": "Jan 11, 2026 at 12:00 PM"
    }
  ]
}

{
  "error": "Invalid embed token"
}

{
  "error": "Domain not authorized for this embed"
}

Complete reference of all available configuration options. These are set in your DinoCMS dashboard and fetched automatically by the embed script.

Common issues and how to resolve them.