📘

Global variable

When you integrate a widget to your page, it will automatically add a global variable JoinStories. It is useful if you need to interact with the Widget. See below for available methods.

Methods

Close Player

Close the player if the player is open.

window.JoinStories.closePlayer(alias?: string): void {};

Arguments

• alias(optional): the alias of the widget you want to close the player from. If not specified, it will close any JOIN players opened.

Resolve add-to-cart order

Method to resolve an add to cart order. After receiving an JOIN_STORIES_ADD_TO_CART event, you should call this method once the product is added to cart. For more information on this method usage, look at this guide.

window.JoinStories.resolveAddToCart(orderId: string, error = false : boolean | AddToCartError): void {};

Arguments :

• orderId : the orderId received in the JOIN_STORIES_ADD_TO_CART event.
• error(optional) : If you could not add the product to the cart, send an error code link to your error, or send true if their is no generic error for this case. If not provided of false, add to cart is considered a success.
  Generic errors :
  • PRODUCT_OUT_OF_STOCK : the product is no longer available.

Set Custom Targeting for Ads

This method allows you to set custom targeting for ads. You may apply targeting to a specific widget or, if no widget alias is provided, set values globally for the page.

window.JoinStories.setCustomAdsTargeting(targeting: Record<string, string | undefined>, widgetAlias?: string): void;

Arguments

• targeting: An object containing key-value pairs to be sent to the Ad Server. Only string values will be passed to the server; undefined can be used to remove values.
• widgetAlias (optional): Specifies the widget for which targeting values should be set. If not provided, targeting will be applied globally for the page. If both global and widget-specific values are set, the widget-specific value will take precedence.

Events

You can listen to events triggered by the widget via the native DOM Events.

📘

DOM Events

all widget's events are available via native DOM listeners. See native documentation for more details on how to use them.

Example

document.addEventListener("JOIN_STORIES_ADD_TO_CART", function(event) {
	// payload is available in `detail` field of the event.
  console.log(event.detail.widgetAlias)
})

Events List

Here is the list of all events.

JOIN Controller is ready (Work in progress)

JOIN_STORIES_READY: The controller window.JoinStories is setup, and it's method may be called.

Events details

No event details.

Add to cart Requested

JOIN_STORIES_ADD_TO_CART : The user is trying to add a product to the cart. When you receive this event, you should confirm if the add to cart is a success or not using the resolveAddToCart method. For more information on this event usage, look at this guide.

Events details

• widgetAlias : the alias of the widget used to add to cart.
• orderId : a unique id used to resolve the order.
• productId : the ID of the product the user wants to add to cart.
• variantId(optional): the ID of the variant of the product the user wants to add to cart, if there is a variant.
• price : the price at which the product is in the story.
• currency: the currency used for the price.
• quantity : the quantity the user is trying to purchase.

See Cart Requested

JOIN_STORIES_SEE_CART : The user is trying to add a product to the cart. For more information on this event usage, look at this guide.

Events details

• widgetAlias : the alias of the widget used to add to cart.

Analytics

JOIN_ANALYTICS: An analytics event has been triggered. For more information about available events, look at this guide.