Site builders

On Shopify, Wix, Squarespace, Webflow or Framer, Help is one piece of code pasted into your site's settings: a Help button on every page, which opens the support form. There's no server to set up. Your customers write to you as guests, giving their email, and your replies reach them by email and on the page.

Before you start

1. In the portal, open Sites and press Add a site. Choose where it's built, and give its address: the one your browser shows when your site is open.
2. Open the site's Install tab. Its code has your key, and what shows the site is yours, already filled in.

Shopify

1. In Shopify, open Online Store, then Themes.
2. Next to your current theme, press … and choose Edit code.
3. Open layout/theme.liquid and paste the code just before </body>.
4. Press Save.

To put the form on a page too, open that page in the theme editor, add a Custom Liquid section and paste <db-help-form></db-help-form>. While your store is behind its password page, we see that page instead of yours, so check your site once the store is open.

Wix

1. In your site's dashboard, open Settings, then Custom Code (under Advanced).
2. Press Add Custom Code and paste the code.
3. Choose All pages, and Body – end.
4. Press Apply, then publish your site.

Wix takes custom code on a paid plan with your own domain connected. Wix shows code you add to one page inside a frame of its own, where the form can't run, so use the Help button.

Squarespace

1. In Squarespace, open Pages, then Website Tools, then Code Injection.
2. Paste the code into Footer.
3. Press Save.

To put the form on a page too, add a Code block to that page and paste <db-help-form></db-help-form>. Code Injection is on the Core, Plus and Advanced plans, and some older ones.

Webflow

1. In Webflow, open Site settings, then Custom code.
2. Paste the code into Footer code.
3. Press Save, then publish your site.

To put the form on a page too, add a Code Embed element to that page and paste <db-help-form></db-help-form>.

Framer

1. In Framer, open Site Settings, then Custom Code.
2. Paste the code into End of <body> tag.
3. Publish your site.

Framer adds custom code to your published site only, never to the preview.

Check your site

Back on the Install tab, press Check your site. We look at your published home page for the code, and say what we saw when it isn't there:

Once your site is verified, its live key works there and nowhere else. Open your site, press Help and send yourself a message: it arrives in Tickets, and the last step ticks itself.

What the code is

<script src="https://help.deltabreen.eu/embed/v1.js" data-help-key="pk_live_…" data-help-proof="deltabreen-help=…" async></script>
<db-help-launcher></db-help-launcher>

• data-help-key says which of your sites a ticket is for. It's safe to show in a page.
• data-help-proof shows the site is yours. It works only for that address and your workspace, so a copy on someone else's site proves nothing.
• <db-help-launcher> is the Help button. <db-help-form> is the form itself, on a page of its own.

Your words, colour and fields are set on the site's Form tab in the portal, so the code never changes. For everything else the script can do, see the embed.

If your builder isn't here

Any builder that lets you add code before </body> on every page works the same way. Some only take code inside a frame (an "HTML embed" box with an address of its own), where the form can't run: ask the builder how to add code to every page instead. A site you can't add code to can still be proven with a DNS record, on the Domains page.