:::highlight yellow 📌
Zid Hybrid Apps empower developers to inject custom Javascript scripts, both global and event-specific directly into a merchant’s storefront. By running these scripts on the client-side, you can create dynamic interactions, enabling you to enhance customer engagement and event tracking.
:::

Global and Event-Specific Scripting

Global Script Injection

With Zid's API, you can inject global scripts that automatically execute when the storefront page loads. These scripts offer a dynamic way to implement client-side functions, such as loading JavaScript utility files or adding features that enhance the user experience across the entire site.

Customer Global Object

The Customer global object provides real-time information about the currently logged-in customer. However, it's crucial to design your script to account for scenarios where no user is logged in, as the Customer object will be empty in such cases.

Parameter	Description
window.customer	Contains details of the logged-in customer.

Blueprint	Description
id	Customer ID
name	Customer Name
mobile	Customer Mobile
email	Customer Email

Event-Specific Script Injection

Zid enables you to inject JavaScript functions that are triggered by specific storefront events, allowing you to create tailored, responsive experiences. By tying your custom code to key user actions, such as adding items to a cart, you can dynamically enhance the shopping experience in real-time.

:::note[]
We're expanding supported events and improving API responses. Your feedback is key — share your ideas to help us enhance the platform!
:::

Supported Events

Here are the events you can target, each event comes with a set of specific parameters that your script can leverage to tailor the user experience:

Triggered when a customer completes a purchase. | Parameter | Description | | --- | --- | | `transactionItems` | List of products purchased. | | `id` | Order ID. | | `product_id` | Product ID. | | `name` | Product Name. | | `sku` | Product SKU code. | | `category` | Product Category. | | `price` | Product Price. | | `quantity` | Product Quantity. | | `currency` | Currency of the transaction. | | `total` | Total amount for the product. | Triggered whenever a customer views a product. | Parameter | Description | | --- | --- | | `productViewd` | Details of the viewed product. | | `id` | Product ID. | | `name` | Product Name. | | `category` | Product Category. | | `price` | Product Price. | | `position` | Display order of the product. | Triggered when an item is added to the shopping cart. | Parameter | Description | | --- | --- | | `productCart` | Details of the product in the cart. | | `id` | Product ID. | | `name` | Product Name. | | `category` | Product Category. | | `price` | Product Price. | | `position` | Display order of the product. | | `list` | Name of the page where added. | | `quantity` | Quantity of the product. | Triggered when an item is removed from the cart. | Parameter | Description | | --- | --- | | `productCart` | Details of the product in the cart. | | `id` | Product ID. | | `name` | Product Name. | | `category` | Product Category. | | `price` | Product Price. | | `position` | Display order of the product. | | `list` | Name of the page where removed. | | `quantity` | Quantity of the product. | Triggered when the checkout process begins.

---

Getting Started with Script Injection

1. App Scope Requirements

To begin injecting scripts into a merchant's store, your need to create an app with the "Extra Addons" scope enabled. This scope grants your app the necessary permissions to deploy custom scripts, ensuring seamless integration with the storefront.

2. Use APIs for Script Management

Zid offers a variety of API endpoints to help you manage your scripts efficiently:

Inject a custom script into a merchant's storefront Fetch a list of all scripts currently injected into a specific store Modify an existing script that has been injected into a store Remove a script from a merchant’s store when it's no longer needed

3. Request Injection Approval

After your hybrid app is ready, reach out to our team for script injection approval through the dashboard chat widget or via email at appmarket@zid.sa. Once you've achieved trusted partner status, future scripts will be automatically injected without the need for approval.