Shopify storefront integration

There's no Shopify app yet, but you can connect a store today. Two parts do two jobs:

• Counting happens after the order, from Shopify Flow, a webhook app or Zapier. It posts the action to your Streakfox webhook.
• Showing progress happens in your theme. The widget displays the customer's streak. It doesn't count anything.

1) Get your webhook URL and secret

In Streakfox onboarding, the Connect the action step shows your webhook URL and secret. You can also find them under Programs → Connections. Keep the secret out of your theme.

2) Count the action after the order

Set up a workflow that runs when an order is paid (or whatever action you count). Shopify Flow's Send HTTP request action, a webhook app or a Zapier "Webhooks by Zapier" step all work. Have it send:

POST https://api.streakfox.com/v1/webhook/YOUR_PROJECT_KEY/e
Content-Type: application/json
X-Streak-Webhook-Secret: YOUR_WEBHOOK_SECRET

{
  "event": "order_placed",
  "userHash": "{{ customer.id }}",
  "idempotencyKey": "order:{{ order.id }}"
}

• event is your action. It must match the action on your program.
• userHash is your member ID. The Shopify customer ID works well because it never changes.
• idempotencyKey is the order ID, so a retried workflow counts the order once.

The template syntax depends on your tool. Map the customer ID and order ID from the order trigger. Before your program goes live, every order it receives counts as a test.

3) Show progress in your theme

Add the widget to theme.liquid, or to a theme app embed if you have one. Show it only to signed-in customers so the member ID matches the one your workflow sends:

{% if customer %}
  <script
    src="https://cdn.streakfox.com/widget.js"
    data-project="YOUR_PROJECT_KEY"
    data-event="order_placed"
    data-user-hash="{{ customer.id }}"
    defer
  ></script>
{% endif %}

data-project is your project key, data-event is the action and data-user-hash is the member ID.

Tips

• Use the same member ID in the workflow and the widget, or the customer sees a fresh streak.
• Pick one action per program, such as order_placed. Add a second program if you want to count a different action.
• If a request fails, the Events API lists each error with its fix.