Honeycomb JS SDK
Mollie Herbert avatar
Written by Mollie Herbert
Updated over a week ago

Triggering the funnel on any page in your Shopify store

Using the app global conversionBearUpsell window object you can invoke several methods and bind callbacks to help you tailor Honeycomb to your store needs. The following functions and callbacks aren't available in checkout and post purchase funnels.

The JS SDK module will be available whenever the app is enabled from the app settings. Add your custom code to the app advanced JS settings input in the app advanced tab.

showFunnel

conversionBearUpsell.showFunnel(funnelType string)

Use this method to programmatically trigger a funnel in the storefront. The funnel type parameter accepts the following values: 'isProduct', 'isCart'.

conversionBearUpsell.showFunnel('isCart'); // will trigger a funnel based on the cart content. Funnel is automatically fetched from the server.
conversionBearUpsell.showFunnel('isProduct',{ originVariantId, originProductId }); // will trigger a product page funnel based on the added element. Funnel is automatically fetched from the server.

closeApp

conversionBearUpsell.closeApp(); // hides the funnel

setCustomGoToCheckout

conversionBearUpsell.setCustomGoToCheckout(customFunction);// Will execute when customers proceed to checkout INSTEAD of the Honeycomb default checkout flow// The function accepts the funnel data. You could access the funnel id with: data.campaign_id// This way you can trigger functionality based on the funnel id// --> return true to prevent the app from using the app default redirect flow after the method executes

Usage example:

1. Redirect to a custom checkout

conversionBearUpsell.setCustomGoToCheckout((funnelData)=>{const offers = funnelData.data.offers;const grabbedOffers = [];offers.forEach((offer)=>{grabbedOffers.push({productId: offer.product_id,variantId: offer.variant_id,quantity: offer.quantity,discount: offer.discount,})});//do whatever you want with grabbed offersconsole.log("grabbedOffers",grabbedOffers);if(grabbedOffers.length){//in case offers were taken we would like to redirec the customer to twitter and stop the app default flowwindow.location.href = 'https://twitter.com'return true;}})

onProceedToCheckout

conversionBearUpsell.onProceedToCheckout(customFunction);//will execute when customers proceed to checkout// The function accepts the funnel data as an input. You could access the funnel id with: data.campaign_id

onAcceptOffer

conversionBearUpsell.onAcceptOffer(customFunction);//will execute when customers grab an offer from the funnel// The function accepts the funnel data as an input. // content_name// content_ids// content_type// value// currency

Events

With post messages you can trigger your custom logic based on events that happen inside the app.

conversionbearupsell:add_to_cart

Triggers for cases where customers accept upsell offers from product page funnel where the follow up action is to stay on page.

window.addEventListener('message', message => {if (message.data?.event == "conversionbearupsell:add_to_cart") {const data = message.data?.data;const acceptedOffers = data?.offers;const campaignName = data?.campaign?.name;const campaignId = data?.campaign_id;}});
Did this answer your question?