# Webflow Integration

In the following article, we'll describe step-by-step how you can integrate Bannernote into your Webflow project - And it's dead simple.\
\
Here is also the official webflow link: <https://university.webflow.com/integrations/bannernote>

![](https://359769419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSsP1wTK9OcoJipEXp_%2F-MVCZ_V-od1kv_hZZa35%2F-MVC_PMukyR04cDxEiUI%2Fdwedwedede.jpg?alt=media\&token=610ca75a-bdb1-4bda-8cc1-5aa27eeb5c67)

## &#x20;1. Copy Your Code Snippet

First things first: [Sign up to bannernote](https://app.bannernote.com/signup) if you havent already. Go into your dashboard, click the **`Add Page`** button and copy your SDK code snippet.

![](https://359769419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSsP1wTK9OcoJipEXp_%2F-MVCWiqK_SsfQIqjEyub%2F-MVCXDPywscDrcV8RhH5%2FRecording%202021-03-07%20at%2017.22.22.gif?alt=media\&token=0c70b9c6-a687-497c-b7cc-397425969d09)

## 2. Paste Code Snippet into Head

Head back to your webflow project, select the page you want to integrate a banner, click the "gear icon" and scroll down to Custom Code. Paste your SDK snippet into the first box which has the headline: **`Inside <head> tag`**

![](https://359769419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSsP1wTK9OcoJipEXp_%2F-MVCWiqK_SsfQIqjEyub%2F-MVCXYT47IngsdFP-Zbw%2FRecording%202021-03-07%20at%2017.24.13.gif?alt=media\&token=285b45f3-719b-47cd-b38e-055a5d8b62e1)

## 3. Publish Webflow Site

Make sure to save your changes and publish the project in webflow.

![](https://359769419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSsP1wTK9OcoJipEXp_%2F-MVCWiqK_SsfQIqjEyub%2F-MVCYOiwXkUHob9mQJiy%2FRecording%202021-03-07%20at%2017.26.00.gif?alt=media\&token=d1cb5df2-a654-44d9-8af5-e2213ae42915)

## 4. Final Step: Verify Implementation

Head back to your [bannernote dashboard](https://app.bannernote.com), click "Add Page" in the top right corner. In the popup, enter the URL, where you have inserted the SDK snippet and click **`Verify Implementation`**. Once verified, your banner appears on the page. That was easy!&#x20;

![](https://359769419-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSsP1wTK9OcoJipEXp_%2F-MVCYQdZjBWHXEG56EKq%2F-MVCYZgMWykbND-rUbjB%2FRecording%202021-03-07%20at%2017.27.40.gif?alt=media\&token=2db8613f-7f72-4cfd-bc59-a1a36dec3ca3)
