Install Hark on a non-Shopify website

Add a Hark button and the embed script to a website that is not powered by Shopify. A developer or a site builder with custom-code access should complete these steps.

When you are finished

The published website opens the intended Hark workflow and a test response appears in Hark.

Before you begin

The Hark company ID from your onboarding email or Hark account team.
Access to the website’s HTML or its site builder’s custom-code area.
The workflow slug from your Hark account team if the button should bypass the default workflow.
Approval to send any customer information your implementation may later provide to Hark.

Add a Hark button

In the page’s HTML, add this code where the Get help button should appear. The type="button" setting prevents the button from accidentally submitting a form.

<button type="button" data-hark-button="get-help">
  Get help
</button>

Load and initialize Hark

Place this code after the Hark buttons and immediately before the page’s closing </body> tag. The initialization function connects the visible buttons to Hark.

Replace HARK_COMPANY_ID with the Hark company ID from your onboarding email or Hark account team.

<script src="https://storage.googleapis.com/prod_harks/sendhark_handler.js"></script>
<script>
  window.harkEmbedJs.initAll("HARK_COMPANY_ID");
</script>

Expected result: Selecting the button opens your default Hark workflow.

Open a specific workflow (optional)

Use data-hark-workflow when a button should open a specific Hark workflow. Replace YOUR_WORKFLOW_SLUG with the exact slug supplied by your Hark account team.

<button
  type="button"
  data-hark-button="get-support"
  data-hark-workflow="YOUR_WORKFLOW_SLUG"
>
  Get support
</button>

Expected result: The button opens the selected workflow, not the default workflow.

Test the installation

Open the published page, select each Hark button, and complete a test submission.

Expected result: The correct workflow opens and the test response appears in your Hark workspace.

Pre-fill customer details (optional)

If your website already knows the customer’s name or email address, add the attributes below to the same Hark button. Replace the example values with HTML-escaped values from the signed-in customer. Omit any attribute you do not have or do not want to send to Hark.

<button
  type="button"
  data-hark-button="get-help"
  data-first_name="Jane"
  data-last_name="Doe"
  data-email="jane.doe@example.com"
>
  Get help
</button>

Expected result: Hark opens with the supplied first name, last name, and email address already filled in.