Embed the chat widget in Shopify

{%- comment -%}
  Signs a JWT with HS256. Outputs the token string.
  Args: payload_json (already a JSON object string), secret.
  Usage: {% capture token %}{% render 'jwt-hs256', payload_json: '{"a":1}', secret: settings.key %}{% endcapture %}
{%- endcomment -%}
{%- liquid
  assign header = '{"alg":"HS256","typ":"JWT"}' | base64_url_safe_encode | remove: '='
  assign payload = payload_json | base64_url_safe_encode | remove: '='
  assign input = header | append: '.' | append: payload
  assign hex = input | hmac_sha256: secret

  comment
    hmac_sha256 returns hex. JWT needs base64url of the raw bytes, so convert 3 bytes (6 hex chars) at a time.
  endcomment
  assign hexchars = '0123456789abcdef'
  assign b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'
  assign sig = ''
  for g in (0..10)
    assign start = g | times: 6
    if g == 10
      assign len = 4
    else
      assign len = 6
    endif
    assign chunk = hex | slice: start, len
    assign n = 0
    for k in (1..len)
      assign k0 = k | minus: 1
      assign c = chunk | slice: k0, 1
      assign v = hexchars | split: c | first | size
      assign n = n | times: 16 | plus: v
    endfor
    if len == 4
      assign n = n | times: 4
      assign i1 = n | divided_by: 4096 | modulo: 64
      assign i2 = n | divided_by: 64 | modulo: 64
      assign i3 = n | modulo: 64
      assign ch = b64chars | slice: i1, 1
      assign sig = sig | append: ch
      assign ch = b64chars | slice: i2, 1
      assign sig = sig | append: ch
      assign ch = b64chars | slice: i3, 1
      assign sig = sig | append: ch
    else
      assign i1 = n | divided_by: 262144 | modulo: 64
      assign i2 = n | divided_by: 4096 | modulo: 64
      assign i3 = n | divided_by: 64 | modulo: 64
      assign i4 = n | modulo: 64
      assign ch = b64chars | slice: i1, 1
      assign sig = sig | append: ch
      assign ch = b64chars | slice: i2, 1
      assign sig = sig | append: ch
      assign ch = b64chars | slice: i3, 1
      assign sig = sig | append: ch
      assign ch = b64chars | slice: i4, 1
      assign sig = sig | append: ch
    endif
  endfor
  echo input | append: '.' | append: sig
-%}

{%- comment -%}
  Typewise chat widget. Signs the logged-in customer's email so the widget can trust it.
  Needs theme settings: settings.typewise_secret_key, settings.typewise_debug (optional)
  Usage in theme.liquid, before </body>: {% render 'typewise-widget' %}
{%- endcomment -%}
{%- if customer and settings.typewise_secret_key != blank -%}
  {%- liquid
    assign tw_now = 'now' | date: '%s' | plus: 0
    assign tw_exp = tw_now | plus: 604800
    assign tw_user_id = customer.id | append: '' | json
    assign tw_email = customer.email | json

    comment
      Add any other customer value here to sign it, e.g. customer.first_name.
      Declare the same name in Context Variables and it becomes a verified variable.
    endcomment
    assign tw_payload = '{"userId":' | append: tw_user_id | append: ',"user_email":' | append: tw_email | append: ',"iat":' | append: tw_now | append: ',"exp":' | append: tw_exp | append: '}'
  -%}
  {%- capture tw_token_raw -%}{%- render 'jwt-hs256', payload_json: tw_payload, secret: settings.typewise_secret_key -%}{%- endcapture -%}
  {%- liquid
    comment
      A render failure prints "Liquid error: ..." instead of a token. Only pass through a real 3-part JWT.
    endcomment
    assign tw_parts = tw_token_raw | split: '.' | size
    if tw_parts == 3
      unless tw_token_raw contains 'Liquid error'
        assign tw_token = tw_token_raw
      endunless
    endif
  -%}
{%- endif -%}
<script>
(function () {
  window.twConfig = {
    clientId: 'YOUR_CLIENT_ID',
    workspaceId: 'YOUR_WORKSPACE_ID',
    {%- if tw_token != blank %}
    signedVariables: {{ tw_token | json }},
    {%- endif %}
    variables: {},
  };
  var s = document.createElement('script');
  s.type = 'module';
  s.src = 'https://platform.typewise.app/sdk/sdk.js';
  document.head.appendChild(s);
})();
</script>

{% render 'typewise-widget' %}