Install Hark on a headless Shopify storefront

Use this guide when Shopify manages products and orders, but a separately built website is the storefront customers visit.

When you are finished

Shopify is connected to Hark and the published headless storefront opens the intended Hark workflow.

Before you begin

Your store’s permanent your-store.myshopify.com address.
The Hark company ID from your onboarding email or Hark account team.
A Shopify account that can install apps.
A developer who can edit and publish the customer-facing storefront.

Enter your Shopify store domain

Enter the store's permanent Shopify address, which ends in .myshopify.com. Do not enter the website address customers use. Shopify will then open the Hark installation screen.

Expected result: Shopify displays the Hark app installation screen.

Authorize Hark

Shopify will list the store information and features Hark is asking to access. Confirm that the correct store is shown, review the list, and select the installation button shown by Shopify.

Expected result: Shopify opens the Hark for Shopify app.

Save your Hark company ID

In Hark for Shopify, enter the company ID from your onboarding email or Hark account team in the Company ID field, then select Save ID.

Expected result: Shopify displays “Company ID saved successfully.”

Keep this ID available. You will use the same value when initializing Hark on your storefront.

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

Run this code once after the Hark buttons appear in the page. The initialization function connects the visible buttons to Hark. If your site adds buttons later without reloading the page, ask your Hark account team for the supported setup.

Replace HARK_COMPANY_ID with the same Hark company ID saved in step 3.

<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.