Zid provides developers and app partners with a flexible way to interact with a store's frontend through App Scripts. This functionality empowers apps to track events, inject custom JavaScript, and personalize user experiences directly within the storefront.

In this article, we’ll explore how App Scripts work, how you can use global objects and event listeners, and how to inject custom code snippets through the Partner Dashboard to extend storefront capabilities.

What Are App Scripts?

App Scripts allow Zid apps to insert JavaScript directly into merchant storefronts without requiring manual code changes by the merchant. This enables a wide range of features, including:

Dynamic personalization
Conversion tracking
Analytics enhancement
Storefront interaction customization

Zid App Scripts support two main script types:

Global Scripts – loaded on every page
Event-Driven Scripts – triggered by user interactions such as product views, add-to-cart actions, or purchases

Accessing the Global & Customer Objects

When using Zid App Scripts, developers gain access to special global objects in the browser’s window scope. These objects contain useful information that enables contextual behavior based on the user or session.

Global Object

The window.customer object is automatically available on every page. If a customer is logged in, their details are included. If not, the object remains empty.

Example:

console.log(window.customer);

Customer Object Structure

Parameter	Description
`id`	Unique customer identifier
`name`	Full name of the customer
`mobile`	Mobile number
`email`	Email address

These values allow your scripts to tailor messaging or behavior per customer.

Tracking Storefront Events

Zid supports a series of predefined frontend events that you can hook into using JavaScript. These are triggered automatically based on user behavior.

💡 Note: Some variable names like productCart and productViewd follow Zid’s internal naming conventions and may appear unconventional — this is intentional and consistent across the codebase.

Purchase Event

Triggered after a successful transaction is completed.

Event Object:

{ transactionItems: [ { id: "product-1", name: "Product Name", sku: "SKU-123", category: "Category Name", price: 99.99, quantity: 1, currency: "SAR", total: 99.99 } ], id: "order-123" }

Product View Event

Triggered when a user views a product.

Event Object:

{ productViewd: { id: "product-1", name: "Product Name", category: "Category Name", price: 99.99, position: 3 } }

Add to Cart Event

Fires when a product is added to the cart.

Event Object:

{ productCart: { id: "product-1", name: "Product Name", category: "Category Name", price: 99.99, position: 2, list: "Homepage", quantity: 1 } }

Remove from Cart Event

Fires when a product is removed from the cart.

Event Object:

{ productCart: { id: "product-1", name: "Product Name", category: "Category Name", price: 99.99, position: 2, list: "Homepage", quantity: 1 } }

Start Checkout Event

Triggered when the user initiates the checkout process.

Event Object:

{ cart_id: "cart-456", cart_total: 199.99, currency: "SAR", cart_discount: 20, shipping_cost: 15, checkout_step: "shipping", payment_method: "credit_card", user_id: "user-123", session_id: "guest-456", items: [ { item_id: "product-1", item_name: "Product A", item_price: 99.99, item_quantity: 2, item_category: "Electronics" } ] }

Injecting App Scripts via Snippets

As a Zid app partner, you can deliver your code to all stores using Custom Snippets. These snippets ensure your app's logic is seamlessly applied without manual merchant configuration.

How to Add Snippets

Open the Partner Dashboard
Navigate to General Settings of your app
Click Add Snippet
Paste your JavaScript or CSS
Select snippet placement (header, footer, etc.)
Submit for review and approval

Best Practice: Test all scripts in a staging store before pushing them live. Optimize for performance to avoid impacting store load speed.

Final Notes

Zid’s App Scripts and event layer open powerful customization possibilities for app partners. With access to real-time storefront events, global objects, and code injection via the dashboard, you can: