# Webflow

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](/guide/product/portals/portal/announcement-page.md#installation) 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.

<figure><img src="/files/uE4MMwCmfry70FiEJWwi" alt="" width="375"><figcaption><p>Add a notification badge to a link or a button.</p></figcaption></figure>

{% hint style="info" %}
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>
{% endhint %}

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

<figure><img src="/files/oR9897dCIJtkwavq9Ogn" alt="" width="375"><figcaption><p>Adjust the position of the badge with the element's transform settings.</p></figcaption></figure>

### Video tutorial

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

{% embed url="<https://youtu.be/Ll1hArmqOAg>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.released.so/guide/product/integrations/webflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
