https://bambuser.com/docs/assets/js/4396b2f3.1501a194.js

1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[1712],{25581(e,i,n){n.r(i),n.d(i,{assets:()=>h,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>s,toc:()=>p});var t=n.cw(function(e,i){const t=n.p+"assets/images/side-dock-55fcf687877025b8b58181b85b6fac7a.png";n.d(i,["A",0,t])}),o=n.cw(function(e,i){const t=n.p+"assets/images/video_widget-2dc6d95b55363e663de0d44a1ddf2d60.png";n.d(i,["A",0,t])});const s=JSON.parse('{"id":"overlayWidget","title":"Overlay Widget","description":"Overlay Widget (OLW) on-page call prompt: Video, Side dock, Avatar variants, smart trigger, smartVariantOverride, popupTimeoutSeconds, getOverlayOffsets.","source":"@site/video-consultation/overlayWidget.mdx","sourceDirName":".","slug":"/overlay-widget","permalink":"/docs/video-consultation/overlay-widget","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"overlayWidget","title":"Overlay Widget","description":"Overlay Widget (OLW) on-page call prompt: Video, Side dock, Avatar variants, smart trigger, smartVariantOverride, popupTimeoutSeconds, getOverlayOffsets.","sidebar_label":"Overlay Widget","slug":"overlay-widget"},"sidebar":"someSidebars","previous":{"title":"Cobrowsing","permalink":"/docs/video-consultation/cobrowsing"},"next":{"title":"Provide Search Data","permalink":"/docs/video-consultation/providing-search-data"}}');var a=n(74848),r=n(28453),d=n(86025);const l={id:"overlayWidget",title:"Overlay Widget",description:"Overlay Widget (OLW) on-page call prompt: Video, Side dock, Avatar variants, smart trigger, smartVariantOverride, popupTimeoutSeconds, getOverlayOffsets.",sidebar_label:"Overlay Widget",slug:"overlay-widget"},c=void 0,h={},p=[{value:"Video",id:"video",level:3},{value:"Side dock",id:"side-dock",level:3},{value:"Avatar",id:"avatar",level:3},{value:"Pre-requisites",id:"pre-requisites",level:2},{value:"Activating the widget",id:"activating-the-widget",level:2},{value:"Configuration options",id:"configuration-options",level:2},{value:"Programmatically hide or show OLW",id:"programmatically-hide-or-show-olw",level:2},{value:"1: Expose <code>oneToOneEmbed</code> to window object",id:"1-expose-onetooneembed-to-window-object",level:3},{value:"2: Control appearance of Overlay widget:",id:"2-control-appearance-of-overlay-widget",level:3},{value:"Development tricks",id:"development-tricks",level:2}];function g(e){const i={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"container",children:(0,a.jsxs)("div",{className:"row",children:[(0,a.jsx)("div",{className:"col col--9",children:(0,a.jsx)("p",{children:(0,a.jsxs)(i.p,{children:["Want to give your visitors a little nudge into the Calls Widget? Read on.",(0,a.jsx)("br",{}),(0,a.jsx)("br",{}),"\nThe Overlay Widget (OLW) is an easy way to guide more visitors into the Calls Widget. By appearing automatically after a (configurable) amount of seconds it guides visitors towards sales help at the right time. ",(0,a.jsx)("br",{}),(0,a.jsx)("br",{}),"\nThe widget comes in three variants:  ",(0,a.jsx)("code",{children:"Video"}),", ",(0,a.jsx)("code",{children:"Side dock"})," and ",(0,a.jsx)("code",{children:"Avatar"}),". Each variant appears slightly different and implements different engagement strategies."]})})}),(0,a.jsxs)("div",{className:"col col--3",children:[(0,a.jsx)("video",{style:{width:"100%"},autoPlay:!0,muted:!0,loop:!0,playsInline:!0,src:(0,d.Ay)("/img/one-to-one/gifs/video-overlay-widget.webm")}),(0,a.jsx)("p",{children:"Video variant of Overlay Widget"})]})]})}),"\n",(0,a.jsx)(i.h3,{id:"video",children:"Video"}

1),"\n",(0,a.jsx)(i.p,{children:"This variant aims to spark curiosity with inspirational content. Showing a small video to a visitor is\ncommon in live video shopping to spark interest. Once they click it they get some more information and the option to open the Calls Widget, minimize it or dismiss it. You can upload and use your own video (see requirements below), or use one of Bambuser's provided stock videos."}),"\n",(0,a.jsx)(i.admonition,{title:"Requirements",type:"note",children:(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsx)(i.li,{children:"No longer than 10 seconds"}),"\n",(0,a.jsxs)(i.li,{children:[(0,a.jsx)(i.code,{children:"200x320"})," pixels"]}),"\n",(0,a.jsx)(i.li,{children:"mp4 format"}),"\n",(0,a.jsx)(i.li,{children:"Audio will be removed"}),"\n",(0,a.jsx)(i.li,{children:"Max size 1 MB, recommended size less than 300 kB"}),"\n"]})}),"\n",(0,a.jsx)(i.p,{children:(0,a.jsx)(i.img,{alt:"img",src:o().A+"",width:"3000",height:"1687"})}),"\n",(0,a.jsx)(i.h3,{id:"side-dock",children:"Side dock"}),"\n",(0,a.jsx)(i.p,{children:"Like a sales person who approaches you in the store, this variant appears with a friendly message containing an invitation to talk.\nIf the visitor is not interested and instead minimizes (or docks) the widget, help is still nearby."}),"\n",(0,a.jsx)(i.p,{children:(0,a.jsx)(i.img,{alt:"img",src:t().A+"",width:"1920",height:"1080"})}),"\n",(0,a.jsx)(i.h3,{id:"avatar",children:"Avatar"}),"\n",(0,a.jsx)(i.p,{children:"The third variant looks and feels more like a traditional chat bubble and has slightly different messaging.\nIt too can be minimized, but it keeps its shape and appearance. It is possible to change the image displayed in the Avatar."}),"\n",(0,a.jsx)(i.p,{children:(0,a.jsx)(i.img,{alt:"img",src:n(19871).A+"",width:"1920",height:"1080"})}),"\n",(0,a.jsx)(i.h2,{id:"pre-requisites",children:"Pre-requisites"}),"\n",(0,a.jsxs)(i.p,{children:["Since the Overlay Widget's purpose is to guide the visitor into the Calls Widget, one must first ",(0,a.jsx)(i.a,{href:"/video-consultation/initial-setup",children:"set up the Calls Widget integration"}),"."]}),"\n",(0,a.jsx)(i.h2,{id:"activating-the-widget",children:"Activating the widget"}),"\n",(0,a.jsxs)(i.p,{children:["For the OLW to be activated we add the ",(0,a.jsx)(i.code,{children:"smart"})," trigger option to the ",(0,a.jsx)(i.code,{children:"BambuserOneToOneEmbedd"})," constructor's option object:"]}),"\n",(0,a.jsx)(i.pre,{children:(0,a.jsx)(i.code,{className:"language-js",children:"let oneToOneEmbed = new BambuserOneToOneEmbed({\n  // other options\n  triggers: [\n    'connect-link', \n    'smart', // activate the overlay widget\n  ],\n  smartVariantOverride: 'Side dock', // force variant 'Side dock' \n});\n"})}),"\n",(0,a.jsx)(i.h2,{id:"configuration-options",children:"Configuration options"}),"\n",(0,a.jsxs)(i.p,{children:["The OLW makes use of the options provided to the Calls Widget such as ",(0,a.jsx)(i.code,{children:"orgId"})," and ",(0,a.jsx)(i.code,{children:"locale"}),". In addition, the following modifications to the default behavior exist:"]}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsx)(i.li,{children:(0,a.jsxs)(i.strong,{children:[(0,a.jsx)(i.code,{children:"options.smartVariantOverride"})," (required)"]})}),"\n"]}),"\n",(0,a.jsxs)(i.p,{children:["Choose a certain variant to be used. The available variants are: ",(0,a.jsx)(i.code,{children:"Side dock"})," and ",(0,a.jsx)(i.code,{children:"Avatar"}),". These values are ",(0,a.jsx)(i.code,{children:"case-sensitive"}),"."]}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsx)(i.li,{children:(0,a.jsxs)(i.strong,{children:[(0,a.jsx)(i.code,{children:"options.popupTimeoutSeconds"})," (optional, default=60)"]})}),"\n"]}),"\n",(0,a.jsx)(i.p,{children:"Defines after how many seconds the overlay should appear."}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsx)(i.li,{children:(0,a.jsxs)(i.strong,{children:[(0,a.jsx)(i.code,{children:"options.getOverlayOffsets(position)"})," (optional, default=undefined)"]})}),"\n"]}),"\n",(0,a.jsx)(i.p,{children:"Beyond the static offsets that can be set in the theme, we also offer a dynamic solution when static values don't work. For instance, your website may have other elements on the bottom of the viewport that need to be avoided.\nOr perhaps the position ought to change based on the size of the viewport to accommodate for layout differences between mobile and desktop visitors.\nBeside all that, you can override Z index of OLW, in order that it is not placed on top of other components on a your site."}

1),"\n",(0,a.jsx)(i.pre,{children:(0,a.jsx)(i.code,{className:"language-js",children:"/*\n * Possible values for position:\n * - bottom_left\n * - bottom_right\n * - docked_left\n * - docked_right\n */\nfunction calculateOLWOffsets(position) {\n  const isMobile = document.body.classList.contains('mobile')\n  // Avoid overlap with the sticky footer\n  const yOffset = isMobile ? '64px' : '16px'\n  const overrideZIndex = '1000'\n\n  return {\n    x: '16px',\n    y: yOffset\n    zIndex: overrideZIndex\n  }\n}\n\nlet oneToOneEmbed = new BambuserOneToOneEmbed({\n  getOverlayOffsets: calculateOLWOffsets\n});\n\n"})}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsx)(i.li,{children:(0,a.jsx)(i.strong,{children:(0,a.jsx)(i.code,{children:"Hide overlay when no agents online"})})}),"\n"]}),"\n",(0,a.jsx)(i.p,{children:"The OLW could be hidden on your website when no agents are online. This is a setting on your organization so if you want that feature, reach out to your Bambuser contact."}),"\n",(0,a.jsx)(i.h2,{id:"programmatically-hide-or-show-olw",children:"Programmatically hide or show OLW"}),"\n",(0,a.jsx)(i.p,{children:"If you want, you can programmatically hide or show OLW programmatically.\nYou will likely want to control that after a certain action has happened on your website."}),"\n",(0,a.jsxs)(i.h3,{id:"1-expose-onetooneembed-to-window-object",children:["1: Expose ",(0,a.jsx)(i.code,{children:"oneToOneEmbed"})," to window object"]}),"\n",(0,a.jsx)(i.pre,{children:(0,a.jsx)(i.code,{className:"language-js",metastring:"{6,7}",children:"window.onBambuserOneToOneReady = function(BambuserOneToOneEmbed) {\

1n  oneToOneEmbed = new BambuserOneToOneEmbed({\n    ...\n  });\n\n    //expose oneToOneEmbed to the window object\n    window.oneToOneEmbed = oneToOneEmbed\n}\n"})}),"\n",(0,a.jsx)(i.h3,{id:"2-control-appearance-of-overlay-widget",children:"2: Control appearance of Overlay widget:"}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsxs)(i.li,{children:["to show OLW, call ",(0,a.jsx)(i.code,{children:"oneToOneEmbed.showOverlayWidget"})]}),"\n",(0,a.jsxs)(i.li,{children:["to hide OLW, call ",(0,a.jsx)(i.code,{children:"oneToOneEmbed.hideOverlayWidget"})]}),"\n"]}),"\n",(0,a.jsx)(i.h2,{id:"development-tricks",children:"Development tricks"}),"\n",(0,a.jsxs)(i.p,{children:["The widget tracks whether it has been shown before as it may behave differently upon subsequent appearances. This is done through LocalStorage and can be turned off by clearing it with ",(0,a.jsx)(i.code,{children:"window.localStorage.clear()"}),". This is useful when you want to repeatedly test the first appearance of the widget."]})]})}function m(e={}){const{wrapper:i}={...(0,r.R)(),...e.components};return i?(0,a.jsx)(i,{...e,children:(0,a.jsx)(g,{...e})}):g(e)}},19871(e,i,n){const t=n.p+"assets/images/avatar-d2edb4a2790efabc6eb49f6f5f2652ae.png";n.d(i,["A",0,t])},28453(e,i,n){n.d(i,{R:()=>a,x:()=>r});var t=n(96540);const o={},s=t.createContext(o);function a(e){const i=t.useContext(s);return t.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function r(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:i},e.children)}}}]);