WhatsApp Order Tracking Widget

This widget allows customers to receive their order tracking information via WhatsApp.

How to Use

1. Embed the Script

Add the following two script tags to your HTML file, preferably just before the closing </body> tag.

The first one is for configuration.
Second one actually loads the UI Widget

<script>
  window.user_id = "your_chatarmin_userid"
  window.wa_phone_number = "your_whatsapp_number"
  window.order_id = "customer_order_id"
  window.mount_element_selector = "#your_mount_element_id"
</script>

<script src="https://typ.chatarmin.com/index.js" type="module"></script>

2. Optional Configuration

You can customize the widget by setting additional variables:

<script>
  window.wa_force_number_input = true
  window.wa_message = "Custom WhatsApp message"
  window.wa_title = "Custom widget title"
  window.wa_text = "Custom widget text"
  window.wa_placeholder = "Custom input placeholder"
  window.wa_button_text = "Custom button text"
  window.wa_success_title = "Custom success title"
  window.wa_success_text = "Custom success text"
  window.wa_error_phone_number = "Custom phone number error"
  window.wa_error = "Custom general error"
  window.customer.email = "example@email.com"
</script>

Configuration Variables

Variable	Description	Default
`wa_phone_number`	Your WhatsApp number (required)	None
`user_id`	Your Chatarmin User ID (required)	None
`order_id`	Customer's order ID (required)	None
`mount_element_selector`	CSS selector for the mount element (required)	None
`wa_force_number_input`	Always show desktop version with number input	`false`
`wa_message`	Custom message for WhatsApp	"Hey, ich würde gerne meine Versandbestätigung auch über WhatsApp erhalten. Die Bestellnummer lautet"
`wa_title`	Widget title	"Deine Bestellung per WhatsApp verfolgen!"
`wa_text`	Widget description	"Trage dich jetzt ein und wir schicken dir deine Sendungsnummer per WhatsApp, sobald deine Bestellung versendet wurde:"
`wa_placeholder`	Input placeholder	"Deine WhatsApp-Nummer eingeben ..."
`wa_button_text`	Submit button text	"Jetzt Sendungsnummer erhalten!"
`wa_success_title`	Success message title	"Das hat funktioniert!"
`wa_success_text`	Success message text	"Wir schicken dir deine Sendungsnummer per WhatsApp, sobald deine Bestellung versendet wurde."
`wa_error_phone_number`	Phone number error message	"Ungültige Nummer"
`wa_error`	General error message	"Fehler: .."
`customer.email`	Set the customer Email in Chatarmin	None

Example

Here's an example of how to implement the widget:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Order Tracking Widget Example</title>
  </head>
  <body>
    <div id="whatsapp-widget-container"></div>
    <script>
      window.wa_phone_number = "491571361273"
      window.user_id = "XXXX"
      window.order_id = "1234567890"
      window.mount_element_selector = "#whatsapp-widget-container"
    </script>
    <script src="https://typ.chatarmin.com/index.js" type="module"></script>
  </body>
</html>

This example sets up the widget with a custom WhatsApp number, forces the number input to be displayed, sets an order ID, and specifies the mount element for the widget.