1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[4010],{92207(e,t,n){n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>d,metadata:()=>i,toc:()=>l});var r=n.cw(function(e,t){const r=n.p+"assets/images/cartIntegration1To1Flow-78dd341c35d61318fac2fbccd8525bc8.png";n.d(t,["A",0,r])});const i=JSON.parse('{"id":"cartIntegrationOneToOne","title":"Cart integration","description":"Sync the Calls Widget virtual cart with your native cart via should-add-item-to-cart, should-update-item-in-cart, goto-checkout events; GA4 affiliation dedup.","source":"@site/video-consultation/cartIntegrationOneToOne.mdx","sourceDirName":".","slug":"/cart-integration","permalink":"/docs/video-consultation/cart-integration","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"cartIntegrationOneToOne","title":"Cart integration","description":"Sync the Calls Widget virtual cart with your native cart via should-add-item-to-cart, should-update-item-in-cart, goto-checkout events; GA4 affiliation dedup.","sidebar_label":"Cart integration","slug":"cart-integration"},"sidebar":"someSidebars","previous":{"title":"Provide Product Data","permalink":"/docs/video-consultation/provide-product-data"},"next":{"title":"Miniplayer","permalink":"/docs/video-consultation/floating-player"}}');var o=n(74848),s=n(28453);const d={id:"cartIntegrationOneToOne",title:"Cart integration",description:"Sync the Calls Widget virtual cart with your native cart via should-add-item-to-cart, should-update-item-in-cart, goto-checkout events; GA4 affiliation dedup.",sidebar_label:"Cart integration",slug:"cart-integration"},c=void 0,a={},l=[{value:"Handle Add to Cart Event",id:"handle-add-to-cart-event",level:2},{value:"Handle Update Cart Event",id:"handle-update-cart-event",level:2},{value:"Handle Checkout Event",id:"handle-checkout-event",level:2},{value:"Affiliation tracking",id:"affiliation-tracking",level:2}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Products presented to the customer in the Bambuser Video Consultation session can be added to the virtual cart within the Calls Widget. These products will need to be synchronized with your native cart."}),"\n",(0,o.jsxs)(t.p,{children:["The embed instance (",(0,o.jsx)(t.code,{children:"BambuserOneToOneEmbed"}),") will emit events when certain actions are performed by an agent."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{alt:"img",src:r().A+"",width:"1614",height:"1090"})}),"\n",(0,o.jsx)(t.h2,{id:"handle-add-to-cart-event",children:"Handle Add to Cart Event"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Event name:"})," ",(0,o.jsx)(t.code,{children:"should-add-item-to-cart"})]}),"\n",(0,o.jsx)(t.admonition,{title:"trigger",type:"info",children:(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["When an agent clicks on ",(0,o.jsx)(t.code,{children:"Add to Cart"})," button inside the agent tool"]}),"\n"]})}),"\n",(0,o.jsxs)(t.p,{children:["In the widget, the agent will be able to add products to the call. To reflect this event to you native cart, you will need to use ",(0,o.jsx)(t.strong,{children:"your own method"})," to add the product to the cart in the ",(0,o.jsx)(t.code,{children:"should-add-item-to-cart"})," event handler."]}),"\n",(0,o.jsxs)(t.p,{children:["When ",(0,o.jsx)(t.code,{children:"callback(true)"}),", the product will be added to the widget cart."]}),"\n",(0,o.jsxs)(t.p,{children:["When ",(0,o.jsx)(t.code,{children:"callback(false)"}),", an appropriate error message will appear in the widget."]}),"\n",(0,o.jsxs)(n,{style:{cursor:"pointer"},children:[(0,o.jsx)("summary",{children:(0,o.jsx)("b",{children:"Event payload"})}),(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Content"})}),(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Description"})}),(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Type"})})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"addedItem.sku"}),(0,o.jsx)(t.td,{children:"Contains your reference to the product"}),(0,o.jsx)(t.td,{children:"String"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"callback"}),(0,o.jsx)(t.td,{children:"To inform the widget cart if the process of handling the event was successful or unsuccessful"}),(0,o.jsx)(t.td,{children:"Function"})]})]})]})]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(n,{style:{cursor:"pointer"},children:[(0,o.jsx)("summary",{children:(0,o.jsx)("b",{children:"Example code"})}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"// Inside onBambuserOneToOneReady method!\noneToOneEmbed.on('should-add-item-to-cart', (a
1ddedItem, callback) => {\n\n const yourAddToCartMethod = (sku) => {\n // TODO: Implement your logic for adding a product variation to your native cart\n // e.g. fetch('/cart/add', { method: 'POST', body: JSON.stringify({ sku: sku, quantity: 1 }) });\n return Promise.resolve({\n success: true\n });\n\n }\n\n yourAddToCartMethod(addedItem.sku)\n .then(() => callback(true))\n .catch(error => {\n if (error.message === yourOutOfStockErrorMessage) {\n // Unsuccessful due to 'out of stock'!\n callback({\n success: false,\n reason: \"out-of-stock\",\n });\n } else {\n // Unsuccessful due to other problems\n callback(false);\n }\n });\n});\n"})})]}),"\n",(0,o.jsx)(t.h2,{id:"handle-update-cart-event",children:"Handle Update Cart Event"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Event name:"})," ",(0,o.jsx)(t.code,{children:"should-update-item-in-cart"})]}),"\n",(0,o.jsx)(t.admonition,{title:"trigger",type:"info",children:(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Whenever the agent modifies product quantity in the virtual cart"}),"\n",(0,o.jsx)(t.li,{children:"Whenever the agent adds the same product to the cart that is already in the widget cart"}),"\n"]})}),"\n",(0,o.jsx)(t.p,{children:"In addition to adding product to the cart, the agent can also increase or decrease the quantity of a previously added product, or even remove the product from the cart."}),"\n",(0,o.jsxs)(t.p,{children:["To reflect this event to your native cart, you will need to use ",(0,o.jsx)(t.strong,{children:"your own method"})," to update the product to the native cart within the ",(0,o.jsx)(t.code,{children:"should-update-item-in-cart"})," event handler."]}),"\n",(0,o.jsxs)(t.p,{children:["When ",(0,o.jsx)(t.code,{children:"callback(true)"}),", the product will be added to the Bambuser cart."]}),"\n",(0,o.jsxs)(t.p,{children:["When ",(0,o.jsx)(t.code,{children:"callback(false)"}),", an appropriate error message will appear in the widget."]}),"\n",(0,o.jsxs)(n,{style:{cursor:"pointer"},children:[(0,o.jsx)("summary",{children:(0,o.jsx)("b",{children:"Event payload"})}),(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Property"})}),(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Description"})}),(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Type"})})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"updatedItem.sku"}),(0,o.jsx)(t.td,{children:"contains your reference to the product"}),(0,o.jsx)(t.td,{children:"String"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"updatedItem.quantity"}),(0,o.jsx)(t.td,{children:"number of products with above sku currently in the widget cart"}),(0,o.jsx)(t.td,{children:"Integer"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"updatedItem.previousQuantity"}),(0,o.jsx)(t.td,{children:"number of products with above sku previously in the widget cart"}),(0,o.jsx)(t.td,{children:"Integer"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"callback"}),(0,o.jsx)(t.td,{children:"To inform the widget cart if the process of handling the event was successful or unsuccessful"}),(0,o.jsx)(t.td,{children:"Function"})]})]})]})]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(n,{style:{cursor:"pointer"},children:[(0,o.jsx)("summary",{children:(0,o.jsx)("b",{children:"Example code"})}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"// Inside onBambuserOneToOneReady method!\noneToOneEmbed.on('should-update-item-in-cart', (updatedItem, callback) => {\n\n const yourMethodToUpdateCart = (sku, quantity) => {\n // TODO: Implement your logic for updating your native cart\n // e.g. fetch('/cart/update', { method: 'POST', body: JSON.stringify({ sku: sku, quantity: quantity }) });\n return Promise.resolve({\n success: true\n });\n\n }\n\n const yourMethodToDeleteItemFromCart = (sku) => {\n // TODO: Implement your logic for removing the product from your native cart\n // e.g. fetch('/cart/remove', { method: 'POST', body: JSON.stringify({ sku: sku, quantity: 0 }) });\n return Promise.resolve({\n success: true\n });\n\n }\n\n if (updatedItem.quantity > 0) {\n yourMethodToUpdateCart({\n sku: updatedItem.sku,\n quantity: updatedItem.quantity,\n })\n .then(() =>
1 {\n // cart update was successful\n callback(true);\n })\n .catch(error => {\n if (error.message === yourOutOfStockErrorMessage) {\n // Unsuccessful due to 'out of stock'!\n callback({\n success: false,\n reason: \"out-of-stock\",\n });\n } else {\n // Unsuccessful due to other problems\n callback(false);\n }\n });\n }\n\n // user wants to remove the product from the cart\n if (updatedItem.quantity === 0) {\n yourMethodToDeleteItemFromCart(updatedItem.sku)\n .then(() => {\n // successfully deleted item\n callback(true);\n })\n .catch(() => {\n // failed to delete item\n callback(false);\n });\n }\n});\n"})})]}),"\n",(0,o.jsx)(t.h2,{id:"handle-checkout-event",children:"Handle Checkout Event"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Event name:"})," ",(0,o.jsx)(t.code,{children:"goto-checkout"})]}),"\n",(0,o.jsx)(t.admonition,{title:"trigger",type:"info",children:(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["When the customer clicks the ",(0,o.jsx)(t.code,{children:"Checkout"})," button inside the Calls Widget's virtual cart"]}),"\n"]})}),"\n",(0,o.jsx)(t.admonition,{type:"note",children:(0,o.jsxs)(t.p,{children:["If ",(0,o.jsx)(t.code,{children:"goto-checkout"})," event is missing from your integration code, then checkout button will not appear within the call"]})}),"\n",(0,o.jsx)(t.p,{children:"When the customer is happy with their products added to the virtual cart, they can continue to the native checkout."}),"\n",(0,o.jsxs)(t.p,{children:["To handle that, you should specify the location of your website checkout page inside ",(0,o.jsx)(t.code,{children:"goto-checkout"})," event."]}),"\n",(0,o.jsxs)(t.p,{children:["When a customer clicks on ",(0,o.jsx)(t.code,{children:"Checkout"})," button, there are ",(0,o.jsx)(t.strong,{children:"two options"})," on how to open the checkout page:"]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Options:"})}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:["Redirect customer to your native checkout page in the current tab. The Calls Widget will be minimized and float above the page. Read more information about miniplayer ",(0,o.jsx)(t.a,{href:"/video-consultation/floating-player",children:"here"}),"."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:"Open up the checkout page in a new tab, keeping the Calls Widget in full sized on the original tab."}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n,{style:{cursor:"pointer"},children:[(0,o.jsx)("summary",{children:(0,o.jsx)("b",{children:"Event payload"})}),(0,o.jsxs)(t.admonition,{title:"Use case ",type:"warning",children:[(0,o.jsxs)(t.p,{children:["This is needed in case you would like to update your native cart at the time of customer clicking ",(0,o.jsx)(t.code,{children:"Checkout"})," button."]}),(0,o.jsx)(t.p,{children:"In default integration (most cases) where the cart is updated during the call this payload can be ignored."})]}),(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Property"})}),(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Description"})}),(0,o.jsx)(t.th,{children:(0,o.jsx)(t.strong,{children:"Type"})})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"event.cart.items"}),(0,o.jsx)(t.td,{children:"A list of items that are in the virtual cart at the time the event was sent."}),(0,o.jsx)(t.td,{children:"Object"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"event.cart.items.sku"}),(0,o.jsx)(t.td,{children:"Product ID of the item"}),(0,o.jsx)(t.td,{children:"String"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"event.cart.items.name"}),(0,o.jsx)(t.td,{children:"Name of the item"}),(0,o.jsx)(t.td,{children:"String"})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"event.cart.items.count"}),(0,o.jsx)(t.td,{children:"Number of items"}),(0,o.jsx)(t.td,{children:"Integer"})]})]})]})]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsxs)(n,{style:{cursor:"pointer"},children:[(0,o.jsx)("summary",{children:(0,o.jsx)("b",{children:"Example code"})}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",children:"// Inside onBambuserOneToOneReady method!\n oneToOneEmbed.on('goto-checkout', (event) =>
1 {\n\n // Open checkout url in the same tab (enabled miniplayer)\n // oneToOneEmbed.floatAbove('https://your-checkout-url-here')\n \n // Open checkout url in new tab and allow call to continue in current tab\n // window.open('https://your-checkout-url-here', '_blank');\n});\n"})})]}),"\n",(0,o.jsx)(t.h2,{id:"affiliation-tracking",children:"Affiliation tracking"}),"\n",(0,o.jsxs)(t.p,{children:["If you as a merchant use Google Tag Manager to trigger any ",(0,o.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#add_to_cart",children:"add_to_cart"})," or ",(0,o.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#remove_from_cart",children:"remove_from_cart"})," events from or as an after effect of your cart integration code, make sure to include an ",(0,o.jsx)(t.code,{children:"affiliation"})," item parameter to prevent duplicate products from being added or removed in the virtual cart."]}),"\n",(0,o.jsxs)(t.p,{children:["The value should be ",(0,o.jsx)(t.code,{children:'"Bambuser Calls YOUR_ORG_ID_HERE"'})," where you replace ",(0,o.jsx)(t.strong,{children:"YOUR_ORG_ID_HERE"})," with the same value you provided to the initial Calls Widget ",(0,o.jsx)(t.a,{href:"/video-consultation/initial-setup#initiate-the-calls-widget",children:"configuration"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},28453(e,t,n){n.d(t,{R:()=>s,x:()=>d});var r=n(96540);const i={},o=r.createContext(i);function s(e){const t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.