Skip to main content

​
Inline Embed

The inline embed displays your announcements directly within your page content, styled to match your site. [TODO: ADD IMAGE - INLINE EMBED ON A MARKETING SITE]

​
Installation

​
1. Create an inline embed

  1. Go to Settings → Developer → Embeds
  2. Click New Embed
  3. Select Inline as the type
  4. Configure your settings
  5. Click Create

​
2. Add the container

Add a container element where you want the announcements to appear: 
<div id="updates-page-embed"></div>

​
3. Add the script

Copy and paste the script tag: 
<div id="updates-page-embed"></div>

<script 
  src="https://cdn.updates.page/inline.js" 
  data-embed-id="your-embed-id"
  data-container="#updates-page-embed"
  async
></script>

​
Configuration options

OptionDescriptionDefault
ContainerCSS selector for the container element#updates-page-embed
ThemeLight or darkLight
LimitNumber of announcements to show10
CategoriesWhich categories to includeAll
Show imagesDisplay cover imagesYes
Show datesDisplay publication datesYes
Show authorsDisplay author namesYes

​
Customizing with CSS

The inline embed uses minimal default styling so you can customize it to match your site.

​
Available CSS classes

/* Container */
.updates-page-inline { }

/* Individual announcement */
.updates-page-announcement { }

/* Announcement title */
.updates-page-title { }

/* Announcement content/summary */
.updates-page-content { }

/* Cover image */
.updates-page-image { }

/* Category badge */
.updates-page-category { }

/* Date */
.updates-page-date { }

/* Author */
.updates-page-author { }

/* "View all" link */
.updates-page-view-all { }

​
Example: Card-style layout

.updates-page-announcement {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.updates-page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.updates-page-content {
  color: #666;
  line-height: 1.6;
}

.updates-page-category {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
[TODO: ADD IMAGE - BEFORE/AFTER CUSTOM CSS STYLING]

​
Data attributes

Customize behavior with data attributes: 
<script 
  src="https://cdn.updates.page/inline.js" 
  data-embed-id="your-embed-id"
  data-container="#updates-page-embed"
  data-limit="5"
  data-show-images="false"
  data-theme="dark"
  async
></script>
AttributeTypeDescription
data-embed-idstringYour embed ID (required)
data-containerstringCSS selector for container
data-limitnumberMax announcements to show
data-show-imagesbooleanShow cover images
data-show-datesbooleanShow publication dates
data-show-authorsbooleanShow author names
data-themestring”light” or “dark”

​
Linking to full changelog

The inline embed automatically includes a “View all updates” link to your full portal. To customize or hide this link: 
<!-- Hide the "View all" link -->
<script 
  src="https://cdn.updates.page/inline.js" 
  data-embed-id="your-embed-id"
  data-hide-view-all="true"
  async
></script>
Or style it with CSS: 
.updates-page-view-all {
  display: inline-block;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}