Webflow

Add Release Notes to your Webflow website in minutes.

Webflow lets you create professional, custom websites in a completely visual canvas with no code.

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

Prerequisite

If you aren't familiar with Webflow's custom code embed feature, we recommend you watch this their tutorial first: https://university.webflow.com/lesson/custom-code-embed

1. Get the embed code from Released

  1. Follow the installation instructions to get the embed code within Released.

  2. Take note of the <script> and the <released-page> tags. You will require those snippets in the next step.

2. Adding the announcement page

In your Webflow interface.

  1. Click on the ﹢ icon in the top left or simply click a to open the Add elements panel.

  2. Scroll to the Advanced section and click the Embed element.

  3. Copy the code snippets from above into the dialog.

  4. Click Save & Close. The element has now been added.

  5. Move it to the section of the page where you want to display the announcement page.

3. Adding the notification badge

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.

To add a notification badge, we recommend to add the <script> tag in the site's <head>tag instead of in the Embed block to ensure it's available on every page. https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#custom-code-in-page-settings

Similar to adding the announcement page, you can add the notification badge via the embed element.

  • Click on the ﹢ icon in the top left or simply click a to open the Add elements panel.

  • Scroll to the Advanced section and click the Embed element.

  • Copy the code snippets from above into the dialog.

  • Click Save & Close. The element has now been added.

  • Move the element next to the link or button where you want to show the badge. Typically in the navigation.

  • Use the 2D & 3D transforms settings to adjust the position of the badge

Video tutorial

Watch a 90 seconds walk through on how to add your release notes to your Webflow site.

Last updated