Install the Dropl script

Add one script tag to your client's website so they can request changes from the page. Steps for Next.js, WordPress, Webflow, Framer, Squarespace, Wix, Shopify, and HTML.

The Dropl script turns on the feedback toolbar for your client. You add it to the site's <head> once, and it works on every page.

Available on the Freelancer, Studio, and Agency plans.

What the script does

  • Nothing for regular visitors. It loads asynchronously, shows no interface, and makes no network requests unless the visitor opened the site with a feedback link.
  • Shows the toolbar for your client. The Request a website change button in the client portal opens the site with a private feedback link. The browser remembers it, so your client doesn't have to press the button every time.
  • Never changes the site. The toolbar runs in its own Shadow DOM, so your CSS can't break it and it can't break your CSS. It only reads the page to describe the request.

Get your script tag

In the dashboard, open Feedback and the client site's Feedback settings, and copy the script tag. It looks like this, with your client site's ID in data-site:

<script src="https://www.dropl.io/embed/d.js" data-site="q4n8w2zt" async></script>

The site ID is 8 to 16 lowercase letters and numbers. Use the tag from your dashboard rather than this example.

Add it to the website

Paste the tag into the <head> of every page. Most platforms have one place for that.

Next.js and AI-built sites

Add the script to the root layout, app/layout.tsx, with next/script:

import Script from "next/script";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://www.dropl.io/embed/d.js" data-site="q4n8w2zt" strategy="afterInteractive" />
      </body>
    </html>
  );
}

A plain <script async> tag inside <head> in the same file works too. For a site built with Lovable, Bolt, v0, or a similar tool, ask it to "add this script tag to the head of every page" and paste the tag.

WordPress

Use the Dropl plugin:

  1. Install and activate the Dropl plugin (Plugins → Add New, or upload the plugin's zip file).
  2. Go to Settings → Dropl.
  3. Paste the site ID into Client site ID, tick Enable the Dropl script, and click Save Changes.
  4. The status changes to Feedback enabled.

The plugin only adds the script to front-end pages, never to the admin area or the block editor.

You can also paste the tag with any plugin that adds code to the header, or in your theme's header.php before </head>.

Webflow

  1. Open Site settings → Custom code.
  2. Paste the tag into Head code and click Save changes.
  3. Publish the site.

Custom code needs a paid Webflow site plan.

Framer

  1. Open Site settings → General and scroll to Custom code.
  2. Paste the tag into the field for the end of the <head> tag.
  3. Publish the site.

Custom code needs a paid Framer plan.

Squarespace

  1. Open Settings → Advanced → Code injection.
  2. Paste the tag into Header and click Save.

Code injection needs a Business plan or higher.

Wix

  1. Open Settings → Custom code (under Advanced) and click Add custom code.
  2. Paste the tag, choose All pages (load once), and place it in Head.
  3. Click Apply.

Custom code needs a Wix premium plan with a connected domain.

Shopify

  1. Open Online Store → Themes, click ⋯ next to your theme, and choose Edit code.
  2. Open layout/theme.liquid and paste the tag just before </head>.
  3. Click Save.

Plain HTML

Paste the tag inside <head> on every page, or in the shared header template if your site has one.

Save the site's domains

The toolbar only starts on the client site's saved Website domains, so a feedback link can't be used on another website. Add every domain the site uses, like example.com and any staging domain. See Website domains.

To try the toolbar on your computer, turn on Allow localhost for testing in the site's settings. For Feedback, the domain check applies whether or not embed protection is on. See Testing on your computer.

Test it

  1. Open the client portal as your client would, or use Request a website change yourself.
  2. Your site opens with the toolbar at the bottom of the screen.
  3. Back in the dashboard, the site's Feedback settings show Detected on your domain, with the time it was last seen.

Dropl notices the script the first time someone opens the site this way, so the status only changes after that first visit.

Content Security Policy

If the site sends a Content-Security-Policy header, allow Dropl's domains:

DirectiveAllowWhy
script-srchttps://www.dropl.ioThe script and the toolbar it loads
connect-srchttps://www.dropl.ioSending requests and replies
img-srchttps://video.dropl.io blob: data:Screenshots and photos in the toolbar, and taking the screenshot

For example:

Content-Security-Policy: default-src 'self'; script-src 'self' https://www.dropl.io; connect-src 'self' https://www.dropl.io; img-src 'self' https://video.dropl.io blob: data:

Add these sources to your existing policy rather than replacing it. If the page loads images from other domains that the policy doesn't let it fetch, the screenshot shows placeholders for them; the request is still sent.

Privacy

  • Regular visitors: nothing is captured or sent. The browser downloads the script, like any other script.
  • Your client and team, with a feedback link: when they send a request, Dropl receives the page URL and title, the element they picked, a screenshot of their own view, device and browser details, and their message and photos.
  • Masking: form fields and password fields are masked in screenshots.
  • No recording: only the moment they send a request is captured. There's no session recording or analytics.
  • Turning it off: the toolbar has Turn off on this browser, which forgets the feedback link. Links expire after 30 days, and you can revoke every link for a site from its Feedback settings.

Screenshots and photos count toward your account's storage.

Troubleshooting

The dashboard says the script isn't detected. Open the site once with Request a website change; detection happens then. If it still isn't detected, view the page source and check the tag is in <head> with the right data-site, that the site is published, and that a cache plugin or CDN isn't serving an old copy.

The toolbar doesn't appear. Check that the domain in the address bar is one of the site's saved domains, that Feedback is turned on for the site, and that the browser's console doesn't show a Content Security Policy error. If it does, see Content Security Policy.

The feedback link expired, or the toolbar stopped showing. Links last 30 days and stop working when they're revoked. Press Request a website change in the client portal again for a fresh one.

Feedback isn't available. Feedback isn't included on the Solo plan. Upgrade from Billing to turn it on. Requests sent before a downgrade stay in your dashboard.

Next steps