Add the script to your site
Paste one line of script into your site’s <head>. Ordinary visitors see nothing: Drobber only switches on for people who open your review link.
To collect feedback on a website, add Drobber’s script to the <head> of every page. It is safe to leave in place for good: it stays switched off for ordinary visitors and only switches on for people who open the site through your review link. On WordPress you can install the plugin instead.
Copy the snippet#
- Open the project and go to its Settings tab. Only owners and team members see it.
- Under Install snippet, copy the snippet from the box.
- Paste it inside the
<head>of every page of the site (see below), then save and publish the site. - Open the review link yourself to check it works. The comment tools should appear.
The snippet looks like this, with your own project key in place of dr_…:
<script src="https://app.drobber.com/embed.js" data-drobber-key="dr_…" data-drobber-api="https://app.drobber.com" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" nowprocket defer></script>Copy it exactly as it is, with every attribute. The project key in it is not a secret, since anyone can see it in the page source. What keeps the comment tools private is the review link.
Where to paste it#
- WordPress: the Drobber plugin is easiest. Otherwise use a header code plugin such as WPCode (Header & Footer), or your theme’s header.
- Webflow: Site settings > Custom code > Head code, then publish.
- Shopify: Online Store > Themes > Edit code > theme.liquid, just before
</head>. - Squarespace: Settings > Advanced > Code injection > Header.
- Wix: Settings > Custom code > Add custom code, in the head, on all pages.
- A site built with an AI tool: let the tool add it for you. See Sites built with AI tools.
- Anything else: anywhere inside
<head>on every page.
Check it is installed#
The Install snippet panel shows Installed once Drobber has seen the script working, and Not detected yet until then. Drobber only sees it when someone opens the site through the review link, or presses Review site in the project. Loading the site as an ordinary visitor does not count, so a snippet that is in the right place still shows Not detected yet until the first review visit.
The same state shows as Live or Not installed on the project’s card, and as Widget live or Widget not installed yet in the project’s header. Once installed, the Install snippet panel stays closed until you open it.
If the comment tools don’t appear when you open the review link, see The comment tools don’t appear on my site.
How the script switches on#
- The review link is your Site URL with
?drobber=and a private token on the end. Opening it switches Drobber on. - The browser remembers it for that site, so other pages stay in review mode as your client clicks around. The token is taken out of the address bar straight away.
- In a private window that blocks storage, review mode lasts only for the page that was opened.
- To switch it off again in a browser, open the Settings menu on the toolbar (the sliders) and choose Leave review mode.
- Without the review link the script does nothing, unless you turn on Visitor feedback, which shows a Feedback tab to everyone. See Visitor feedback on a live site.
If a review link gets into the wrong hands, press Generate a new link (the current one stops working) under Review link in Settings. See Invite your clients.
Speed and caching plugins#
The extra attributes in the snippet tell Cloudflare Rocket Loader, WP Rocket, LiteSpeed and Autoptimize to leave Drobber alone. On Cloudways, also add app.drobber.com to Breeze’s JavaScript exclusions if Delay JS or Group JS is on.
Allowed origins#
Allowed origins limits which addresses the script may run on. Set it under Details in the project’s Settings tab, one address per line, then press Save changes.
- Leave it blank and the script works on any address. This is the default.
- Each entry is a scheme and host, such as https://acme.com, with a port if the site uses one. Leave out any path: a trailing slash is fine, but https://acme.com/shop never matches.
- Matching is exact, so https://acme.com and https://www.acme.com are different. List every address the site is reviewed on, staging and preview addresses included.
- An entry such as
*.acme.commatches every subdomain of acme.com, but not acme.com itself. - Your Site URL is not added for you. Once the list has anything in it, a site whose address is not listed never shows the comment tools.