Zid Docs
Merchant APIApp APIThemes
Merchant APIApp APIThemes
Help Center
Slack
  1. App API
  • Create your First App
  • Embedded Apps
  • App Scripts
  • App Events
  • App Subscription
    • Get Subscription Details
      GET
    • Update Usage-Based Charges
      POST
  1. App API

App Scripts

Zid App Scripts allow merchants to inject custom JavaScript directly into their storefront through the Partner Dashboard. This enables dynamic user interactions and personalized experiences.
This documentation outlines the process of injecting global scripts and implementing event-specific scripts that respond to user actions in real-time.

Global and Customer Object Scripting#

Zid’s API supports two types of global objects for advanced scripting:
1.
Global Object: Loads upon page initialization and can include custom JS utility files.
2.
Customer Object: Contains details of the currently logged-in customer. If no user is logged in, the object remains empty.

Global Object Parameters:#

ParameterDescription
window.customerContains details of the logged-in customer. Empty if no user is logged in.

Customer Object Blueprint:#

ParameterDescription
idUnique identifier for the customer
nameFull name of the customer
mobileMobile number of the customer
emailEmail address of the customer
These global objects enable dynamic interactions and personalized user experiences.

Event-Driven Scripting#

Zid supports event-driven scripting, allowing JavaScript execution in response to specific storefront events. These events trigger JavaScript functions to track user interactions and enhance engagement.
Supported Events:
1.
Purchase Event
2.
Product View Event
3.
Add to Cart Event
4.
Remove from Cart Event
5.
Start Checkout Event
(Please note that productCart refers to the product in the cart, and productViewd refers to the viewed product. The unconventional spelling is consistent with the codebase.)

1. Purchase Event#

ParameterDescription
transactionItemsList of products the user purchased.
idOrder Id
product idProduct Id
nameProduct Name
skuProduct Sku code
categoryProduct Category Name
priceProduct Price
quantityProduct Quantity
currencycurrency
totalProduct Total

2. Product View Event#

ParameterDescription
productViewdSingle product details object.
idProduct Id
nameProduct Name
categoryProduct Category Name
priceProduct Price
positionDisplay Order

3. Add to Cart Event#

ParameterDescription
productCartSingle product cart object.
idProduct Id
nameProduct Name
categoryProduct Category Name
priceProduct Price
positionDisplay Order
listName of page
quantityProduct Quantity

4. Remove from Cart Event#

ParameterDescription
productCartSingle product cart object.
idProduct Id
nameProduct Name
categoryProduct Category Name
priceProduct Price
positionDisplay Order
listName of page
quantityProduct Quantity

5. Start Checkout Event Parameters#

ParameterDescription
cart_idUnique identifier for the shopping cart.
cart_totalTotal value of the cart.
currencyCurrency used for the transaction.
itemsList of items in the cart, each represented by its own object.
item_idUnique identifier for each product in the cart.
item_nameName of the product.
item_pricePrice of the product.
item_quantityQuantity of the product in the cart.
item_categoryCategory of the product.
user_idUnique identifier of the user (if logged in).
session_idUnique identifier for the session (if user is not logged in).
cart_discountAny discount applied to the cart.
shipping_costEstimated shipping cost for the cart.
checkout_stepCurrent step in the checkout process (e.g., shipping, payment, confirmation).
payment_methodSelected payment method (if chosen).

Script Injection for App Partners#

Custom Snippets allow you to inject scripts into stores where your app is installed, enabling enhanced functionality, better store customization, and seamless integration. This feature provides flexibility to optimize the merchant experience without requiring them to manually modify their store’s code.

How to Enable Custom Snippets#

Group 1321314716.png
Before publishing, always test your changes in a development store to ensure smooth functionality. Optimize scripts for performance to prevent any impact on storefront loading times.
1.
Open the Partner Dashboard and navigate to the General Settings of your app.
2.
Click on Add Snippet and enter your JavaScript or CSS snippet in the provided field.
3.
Define the snippet’s placement and configure any required parameters.
4.
Submit your changes for review and approval. You can modify or remove the snippet from your app at any time.
Modified at 2025-03-12 20:59:28
Previous
Embedded Apps
Next
App Events
Built with