Framer
Add Release Notes to your Framer website in minutes.
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: https://www.framer.com/learn/code-components/
Prerequisite
1. Adding the embed code
Copy the following code snippet into the <head> element of your page.
Click on the ⚙️ icon in the top right of the header in Framer.
Click on General.
Scroll down to the Custom Code section.
Insert the following code in the End of <head> tag panel.
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.
The component supports a number of properties that can be configured via the UI to adjust the look and feel.
The only mandatory field is the announcement page Channel Id.
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.
After adding the component next to your navigation link or button, you will have to enter the Channel Id for the badge in the properties panel.
The Channel ID for the Badge and the Page are identical.
Lastly, you may have to adjust the positioning of the badge using CSS added to the Custom Code section.
Last updated
