Released Documentation
HomeSupport
  • Getting started
    • Overview
    • Concepts
    • Setup Guide
      • Installing Released
      • Embedding the Widget
      • Embedding the Page
      • Implementing User Verification
      • Changelog Description Field (optional)
  • Permissions
  • Global Settings
    • General
    • Design
    • Internal Domains
    • User Verification
  • Workspace
    • Overview
    • Dashboard
    • Changelog
      • AI Settings
      • Changelog filter
      • Creating and Managing Posts
      • Writing a Post
      • Publishing Updates
      • Templates
      • Editor
        • Images
        • Videos
        • Emojis
        • Keyboard Shortcuts
        • Categories
        • Versions
      • Filter
    • Roadmaps
    • Settings
      • General
      • Access
      • Portal
        • Page Embed
        • Widget Embed
      • Publishing
        • Confluence
        • Email
        • Jira issue links
    • Integrations
      • Framer
      • Webflow
      • Slack
      • Aura
      • Cosmos
      • Karma
      • Scroll Viewport for Confluence
  • Resources
    • AI Tips
      • Create Output in Other Languages
      • Include a Documentation Link in the Output
      • Creating Structured Output
    • Troubleshooting
      • Permissions Issues
    • How-Tos
      • Accessing Custom Fields
      • Configuring Dark Mode
      • Finding the Channel ID
      • Ensuring JavaScript Resource Stability for PCI Compliance
      • How to Open the developer console to check for errors
      • How to Apply Atlassian Marketplace App Promo Codes for Cloud
      • Configuring Content Security Policies (CSP) for Released Embeds
Powered by GitBook
On this page
  • Prerequisite
  • 1. Adding the embed code
  • 2. Adding the announcement page component
  • 3. Adding the badge component

Was this helpful?

  1. Workspace
  2. Integrations

Framer

Add Release Notes to your Framer website in minutes.

PreviousIntegrationsNextWebflow

Last updated 7 months ago

Was this helpful?

Framer let's you design websites on a freeform canvas. Add animations, interactions and a CMS.

With Released + Framer, you can seamlessly embed a widget or announcement page into your website.

This section assumed you are familiar with Framer's code components. If you are new to code components, we recommend you read this page first:

Prerequisite

1. Adding the embed code

Copy the following code snippet into the <head> element of your page.

  1. Click on the ⚙️ icon in the top right of the header in Framer.

  2. Click on General.

  3. Scroll down to the Custom Code section.

  4. Insert the following code in the End of <head> tag panel.

<script src="https://embed.released.so/1/embed.js"></script>

2. Adding the announcement page component

We have created a announcement page component that you can copy and paste into your Framer design view. Simply select the layer where you want to insert the announcement page and paste the URL below into the layer.

https://framer.com/m/Announcement-page-eOYM.js@Z0mbpA8Z50VzS62QH9dz

The component supports a number of properties that can be configured via the UI to adjust the look and feel.

Since the release notes are loaded dynamically, you will need to publish the site in order to preview the changes.

3. Adding the badge component

To notify users about the availability of a new post, you can enhance the user experience by incorporating a notification badge on the link or button leading to the announcement page.

Similar to the Page component, Released provides a Badge component that you can copy and paste into your Framer design view.

https://framer.com/m/Released-badge-UvAC.js@DtpmL9J2ZjCuvy77OuXw

The Channel ID for the Badge and the Page are identical.

The only mandatory field is the announcement page .

After adding the component next to your navigation link or button, you will have to enter the for the badge in the properties panel.

Lastly, you may have to using CSS added to the section.

https://www.framer.com/learn/code-components/
Find the channel ID
Channel Id
Channel Id
Custom Code
Properties of the ReleasedPage Webflow Component
Add a notification badge to a link or a button.
adjust the positioning of the badge