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;}});