> ## Documentation Index
> Fetch the complete documentation index at: https://sleekplan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Sleekplan to Webflow

> Add the Sleekplan feedback widget to a Webflow site by pasting the install snippet into your project's custom code and republishing.

Webflow lets you add third-party scripts without touching code, so installing the Sleekplan widget takes just a couple of minutes. You paste your snippet into the project's custom code area and republish.

<Info>
  First grab your snippet from [**Settings → Widget**](https://app.sleekplan.com/settings/widget) and click **Copy snippet**. See [Install the Sleekplan widget](/help/getting-started/install-widget) for the basics.
</Info>

## Add the widget to every page

<Steps>
  <Step title="Open your project's custom code">
    In the Webflow Designer, open **Project settings**, then go to the **Custom code** tab. You will see two boxes: **Head code** and **Footer code**.
  </Step>

  <Step title="Paste the Sleekplan snippet">
    Paste your snippet into the **Footer code** box (just before the closing body tag). This keeps it out of the critical rendering path so it does not slow the page down.

    ```html theme={"system"}
    <script type="text/javascript">window.$sleek=[];window.SLEEK_PRODUCT_ID=YOUR_PRODUCT_ID;(function(){d=document;s=d.createElement("script");s.src="https://client.sleekplan.com/sdk/e.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
    ```

    Adding it here loads the widget on every page of your site. Click **Save changes**.
  </Step>

  <Step title="Publish your site">
    Custom code only takes effect on the published site, not in the Designer preview. Click **Publish** and select your domain. Once it is live, open your site and look for the Sleekplan launcher button in the bottom-right corner.
  </Step>
</Steps>

<Tip>
  To show the widget on only one page rather than the whole site, open that page's settings (the gear icon next to the page name), and paste the snippet into the page's **Before `</body>` tag** custom code box instead of the project-wide footer.
</Tip>

## Custom code plan requirement

Adding custom code to a Webflow site requires a paid **Site plan** (or a paid Workspace plan). On the free Webflow plan the custom code fields are disabled, so the snippet cannot run. This is a Webflow limitation, not a Sleekplan one.

## Next steps

<CardGroup cols={2}>
  <Card title="Back to install overview" icon="arrow-left" href="/help/getting-started/install-widget">
    The snippet, user identification, and other platforms.
  </Card>

  <Card title="Customize the widget" icon="paintbrush" href="/help/portal-widget/index">
    Match the launcher and colors to your Webflow site's branding.
  </Card>
</CardGroup>