Go to app

Sites & snippet

Install the snippet

After you add a site, adfit gives you a small snippet to install. You add it once to the <head> of your site and adfit takes care of the rest. It loads asynchronously and won't slow your pages.

Where to find your snippet

You'll see the snippet as soon as you add a site, in its Set up area, and anytime later on the site's Snippet tab. Use the copy button to grab the exact embed code; it's generated for your site, so copy it rather than typing it out.

Always paste it into the <head>

Wherever your platform lets you add code, the snippet goes into the <head> of your pages, not the body or the footer. Placing it in the <head> lets adfit personalize content before it's shown.

Screenshot coming soon
The Snippet tab showing the embed code with a copy button and the platform install steps.

Choose your platform

Jump straight to the steps for how your site is built:

Static HTML

Paste the snippet into the <head> of every page you want adfit to personalize.

  1. Step 1

    Open your site's HTML template (the file that renders the <head>).

  2. Step 2

    Paste the snippet just before the closing </head> tag.

  3. Step 3

    Save and re-deploy your site.

WordPress

Add the snippet to the site <head> via your theme or a header-scripts plugin.

  1. Step 1

    In your WordPress admin, open Appearance → Theme File Editor (or a plugin like "WPCode" / "Insert Headers and Footers").

  2. Step 2

    Paste the snippet into the <head> section (header) area.

  3. Step 3

    Save your changes.

Good to know

If you use WP Rocket, add the adfit script to "Excluded JavaScript Files" so it isn't delayed or combined; the exclusion pattern /s/ covers the snippet and everything it loads. The snippet already carries data-no-defer and data-no-optimize attributes, but some optimizers need an explicit exclusion.

Framer

Add the snippet as a custom script that loads at the start of your site's <head>.

  1. Step 1

    In your Framer project, open Settings → Code, then click "Add Script".

  2. Step 2

    In the dialog, give the script a Name you'll recognize, e.g. "adfit".

  3. Step 3

    Set Placement to "Start of <head>". This is critical: the default "End of <body>" runs the snippet only after the page has painted, which causes a visible flash of the original content.

  4. Step 4

    Leave Page set to "All" so every page loads the snippet.

  5. Step 5

    Set Run to "Once". adfit handles in-app navigation automatically, so the snippet only needs to run once.

  6. Step 6

    Paste the snippet into the Code field, then click "Add".

  7. Step 7

    Publish your site. Custom code only runs on the published site, not in the Framer canvas.

Webflow

Add the snippet to the site-wide custom code in your <head>.

  1. Step 1

    In Webflow, open Project Settings → Custom Code.

  2. Step 2

    Paste the snippet into the "Head Code" field.

  3. Step 3

    Save changes and publish your site.

Shopify

Add the snippet to your theme's layout <head>.

  1. Step 1

    In your Shopify admin, go to Online Store → Themes → … → Edit code.

  2. Step 2

    Open Layout → theme.liquid and paste the snippet just before the closing </head> tag.

  3. Step 3

    Save the file.

Good to know

The snippet runs on standard storefront pages loaded through your theme's <head>. Checkout pages and app embeds are not supported, so those pages are not personalized.

After you install

After installing, open your site once in a new tab. adfit verifies the connection automatically.

When you're setting up a brand-new site, the connection check sits right below the install step in the site's Set up area, so you can install and confirm without leaving the page. Once the site connects once, setup is complete and adfit sends you to its Overview.

If the status doesn't turn to Connected on its own, you can run a check yourself. See Verify your connection. If it still won't connect, Troubleshooting covers the usual causes.