https://bambuser.com/docs/assets/js/d611639e.158ebce7.js

1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[1412],{73783(e,t,n){n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"id":"inspector-tool","title":"Inspector Tool","description":"In-browser QA panel via ?inspect-virtual-shopping=true: verify Application ID, Display Rules, Shopper Event payloads, Filtering, Need Selector, CS URL.","source":"@site/chat/inspectorTool.mdx","sourceDirName":".","slug":"/inspector-tool","permalink":"/docs/chat/inspector-tool","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"inspector-tool","title":"Inspector Tool","description":"In-browser QA panel via ?inspect-virtual-shopping=true: verify Application ID, Display Rules, Shopper Event payloads, Filtering, Need Selector, CS URL.","sidebar_label":"Inspector Tool","slug":"/inspector-tool"},"sidebar":"someSidebars","previous":{"title":"Redirect to Customer Service","permalink":"/docs/chat/customer-service"},"next":{"title":"Cookie requirements","permalink":"/docs/chat/cookie-requirements"}}');var r=n(74848),o=n(28453),i=(n(4865),n(19365),n(86025));const a={id:"inspector-tool",title:"Inspector Tool",description:"In-browser QA panel via ?inspect-virtual-shopping=true: verify Application ID, Display Rules, Shopper Event payloads, Filtering, Need Selector, CS URL.",sidebar_label:"Inspector Tool",slug:"/inspector-tool"},l=void 0,c={},h=[{value:"Overview",id:"overview",level:2},{value:"How to load the tool",id:"how-to-load-the-tool",level:3},{value:"What you can inspect",id:"what-you-can-inspect",level:3},{value:"Application ID & Merchant Name",id:"application-id--merchant-name",level:2},{value:"Display Rules",id:"display-rules",level:2},{value:"Shopper Events",id:"shopper-events",level:2},{value:"Department Filtering configuration",id:"department-filtering-configuration",level:2},{value:"Other Information",id:"other-information",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Quickly spot common issues while setting up Bambuser Chat"})}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/inspTool.png")}),"\n",(0,r.jsxs)(t.p,{children:["With the Inspector Tool, you can quickly spot common issues when setting up Bambuser Chat. If you are working on Bambuser Chat implementation, we recommend using this tool to support with a ",(0,r.jsx)(t.em,{children:"smooth and efficient launch process."}),"\nAll the information you need on how to fix issues identified with the Inspector tool can be found in the Dev Docs."]}),"\n",(0,r.jsx)(t.p,{children:"The Bambuser Chat Inspector Tool loads on any website with the implemented, and displays via a panel on your browser session. To learn how to use the tool and its range of capabilities, jump straight in:"}),"\n",(0,r.jsx)(t.h3,{id:"how-to-load-the-tool",children:"How to load the tool"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"How to open the Inspector Tool"})}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/loadTool.png")}),"\n",(0,r.jsx)(t.p,{children:"Firstly, open the website where you have added the Bambuser Chat Tag and Shopper Events."}),"\n",(0,r.jsxs)(t.p,{children:["Then add ",(0,r.jsx)(t.code,{children:"?inspect-virtual-shopping=true"})," to the end of your URL as a query parameter, and reload the page."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["For example: ",(0,r.jsx)(t.a,{href:"https://mywebsite.com/uk/index.html?inspect-virtual-shopping=true",children:"https://mywebsite.com/uk/index.html?inspect-virtual-shopping=true"})]})}),"\n",(0,r.jsx)(t.p,{children:"You will only need to do this once per website (domain). If you have multiple subdomains/environments open, you will need to load this separately on each browser. You will also need to do this if you clear the website cookies or each time you use Incognito Mode. After the first load of the Inspector Tool, the browser will remember that it was loaded and it will then load it automatically across all the pages of the website where the Bambuser Chat Tag is added."}),"\n",(0,r.jsx)(t.h3,{id:"what-you-can-inspect",children:"What you can inspect"}),"\n",(0,r.jsx)(t.h2,{id:"application-id--merchant-name",children:"Application ID & Merchant Name"}),"\n",(0,r.jsx)(t.p,{children:"You can use the Inspector Tool to check the Application ID (App ID) used to load the Bambuser Chat on your website. This can be used to ensure the correct Staging or Production App ID has been used to launch Bambuser Chat."}),"\n",(0,r.jsx)(t.p,{children:"The Merchant Name, which corresponds to the Application ID, will be displayed. This provides additional confirmation that the correct application ID has been implemented."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/appIDi.png")}),"\n",(0,r.jsxs)(t.p,{children:["If no App ID has been added, the message ",(0,r.jsx)(t.code,{children:"No Application ID"})," found will display. If this happens it's a good idea to check that your team has deployed the correct App ID."]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsx)(t.p,{children:"Your App IDs would have been sent to you when you began the setup process. If you are unsure what your App ID is, please get in touch with your Customer Success Manager."})}),"\n",(0,r.jsx)(t.h2,{id:"display-rules",children:"Display Rules"}),"\n",(0,r.jsx)(t.p,{children:"The Display Rules section helps you understand whether or not the Bambuser Chat chat is displaying onyour online store. Getting a clear view of what rules are in place you can help you quickly understand if there is an issues as a result of unwanted rules being in place, or if Bambuser Chat is behaving as expected."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/disRul.png")}),"\n",(0,r.jsx)(t.p,{children:"Display Rules indicate:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"if the store is open / closed"}),"\n",(0,r.jsx)(t.li,{children:"if there are product experts online"}),"\n",(0,r.jsx)(t.li,{children:"if all product experts are busy"}),"\n",(0,r.jsx)(t.li,{children:"if the leads queue is full"}),"\n",(0,r.jsx)(t.li,{children:"display rules (pages allowed or denied to display the Bambuser Chat)"}),"\n",(0,r.jsx)(t.li,{children:"Geo-restrictions (if enabled)"}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Any rules that allow Bambuser Chat chat to display are shown in green. Rules that do not allow the chat to display are shown in red."}),"\n",(0,r.jsx)(t.h2,{id:"shopper-events",children:"Shopper Events"}),"\n",(0,r.jsx)(t.p,{children:"The Events section lists all of the recorded since a shopper started their browsing session."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/shopEv.png")}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Results Panel"})}),"\n",(0,r.jsx)(t.p,{children:"There are 3 columns in the results panel:"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Events"}),(0,r.jsx)(t.th,{children:"Timestamp"}),(0,r.jsx)(t.th,{children:"Status"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:["The event name. If the event name is not supported, ",(0,r.jsx)(t.code,{children:"Invalid"})," will display instead."]}),(0,r.jsx)(t.td,{children:"The timestamp when the event was created."}),(0,r.jsx)(t.td,{children:"The status of the Track Shopper Event."})]})})]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Statuses"})}),"\n",(0,r.jsx)(t.p,{children:"If issues are detected with an event, the Inspector Tool will indicate this before the status value."}),"\n",(0,r.jsx)(t.p,{children:"There are 4 possible statuses:"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Status"}),(0,r.jsx)(t.th,{children:"About"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"Queued"}),(0,r.jsx)(t.td,{children:"The events that have been recorded in the browsers local storage but not yet sent to Hero A This happens when the visitor is browsing the website but has not yet started a chat. If the shopper never starts a chat, these events will no be sent to Bambuser Chat. Once a chat has started the Product Expert will be able to see an other items the customer had been looking at to better understand browsing habits."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"In Progress"}),(0,r.jsx)(t.td,{children:"The event is being sent to the Hero API. This is only a temporary status whilst the events are be sent to Bambuser Chat."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"Sent"}),(0,r.jsx)(t.td,{children:"Events that were successfully sent to the Hero API"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"Failed"}),(0,r.jsx)(t.td,{children:"Events for which the Hero API responded with a error."})]})]})]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Payload Details"}),"\nDepending on the event type, the details of an event can have multiple subsections. For example, a Product View event will have a Product array subsection, and a Purchase event will have both a Purchase Array and Product array subsection."]}),"\n",(0,r.jsx)(t.p,{children:"Each subsection has 4 columns:"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Field"}),(0,r.jsx)(t.th,{children:"About"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"Property"}),(0,r.jsx)(t.td,{children:"The name of the field from the payload."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"Type"}),(0,r.jsx)(t.td,{children:"The type of the value of the property."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"Value"}),(0,r.jsx)(t.td,{children:"The value of the property. If there is no value for property a message \u201cBLANK\u201d will be displayed."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"The validation result for the property"}),(0,r.jsx)(t.td,{children:"This can be one of the following icons: Green tick The property is valid, Red X The property is invali

1d, Dash This is an optional property for which a value was not provided"})]})]})]}),"\n",(0,r.jsx)(t.p,{children:"Here is an example of a valid payload without issues:"}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/events.png")}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Copy or Download Event Payload"})}),"\n",(0,r.jsx)(t.p,{children:"Clicking the Copy to clipboard button will copy the event payload as a JSON to the clipboard such that it can be pasted into an email/ticket/document."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/clipboard.png")}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Download Report"})}),"\n",(0,r.jsx)(t.p,{children:"Clicking the Download button will save a CSV file with the event details and validation messages so that the report can be easily shared via email/ticket/document."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/downEv.png")}),"\n",(0,r.jsx)(t.h2,{id:"department-filtering-configuration",children:"Department Filtering configuration"}),"\n",(0,r.jsx)(t.p,{children:"Department Filtering can allow you to restrict which departments are shown to the shopper on the chat. The filtering can be applied to single or more pages throughout your site."}),"\n",(0,r.jsx)(t.p,{children:"If no Department Filtering is applied on the page, the Inspector Tool will indicate this."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/depFilDis.png")}),"\n",(0,r.jsx)(t.p,{children:"Should you have Departments filtered on a particular page the Inspector Tool will display the configuration and constraints. Click on the department to see the constraint details."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/inspDepart.png")}),"\n",(0,r.jsx)(t.admonition,{type:"warning",children:(0,r.jsx)(t.p,{children:"Any errors that are detected will be described. Should you require further support with any errors please reach out to your Customer Success Manager."})}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/inspDepartFail.png")}),"\n",(0,r.jsx)(t.h2,{id:"other-information",children:"Other Information"}),"\n",(0,r.jsx)(t.p,{children:"There is additional information that Inspector Tool can show you if these are set up. This may be useful when completing the testing of Virtual Shopping, or indeed to check the setup at any time."}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Need Selectors"})," are prompted to the shopper in the on-site chat to guide them through the correct chat journey. Inspector Tool will display the Need Selectors configured for your account in the order shown to the shopper."]}),"\n",(0,r.jsx)(t.p,{children:"Currently, the Need Selectors cannot be managed in the Dashboard. To request any changes, please contact your Customer Success Manager."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/inspNeeds.png")}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Customer Service"})}),"\n",(0,r.jsx)(t.p,{children:"Should the Customer Service link be enabled, the full URL can be seen. The link is also clickable to test if the correct URL has been set in the dashboard."}),"\n",(0,r.jsx)(t.p,{children:"If the link does require updating this can easily be done in the dashboard, or alternatively please contact your Customer Success Manager."}),"\n",(0,r.jsx)("img",{src:(0,i.Ay)("/img/inspCustomer.png")})]})}function u(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},19365(e,t,n){n.d(t,{A:()=>l});n(96540);var s=n(18215),r=n(47751);const o="tabItem_Ymn6";var i=n(74848);function a({children:e,className:t,hidden:n}){return(0,i.jsx)("div",{role:"tabpanel",className:(0,s.A)(o,t),hidden:n,children:e})}function l({children:e,className:t,value:n}){const{selectedValue:s,lazy:o}=(0,r.uc)(),l=n===s;return!l&&o?null:(0,i.jsx)(a,{className:t,hidden:!l,children:e})}},4865(e,t,n){n.d(t,{A:()=>m});n(96540);var s=n(18215),r=n(17559),o=n(47751),i=n(23104),a=n(92303);const l="tabList__CuJ",c="tabItem_LNqP";var h=n(74848);function d({className:e}){const{selectedValue:t,selectValue:n,tabValues:r,block:a}=(0,o.uc)(),l=[],{blockElementScrollPositionUntilNextRender:d}=(0,i.a_)(),u=e=>{const s=e.currentTarget,o=l.indexOf(s),i=r[o].value;i!==t&&(d(s),n(i))},p=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,h.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":a},e),children:r.map(({value:e,label:n,attributes:r})=>(0,h.jsx)("li",{role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>{l.push(e)},onKeyDown:p,onClick:u,...r,className:(0,s.A)("tabs__item",c,r?.className,{"tabs__item--active":t===e}),children:n??e},e))})}function u({children:e}){return(0,h.jsx)("div",{className:"margin-top--md",children:e})}function p({className:e,children:t}){return(0,h.jsxs)("div",{className:(0,s.A)(r.G.tabs.container,"tabs-container",l),children:[(0,h.jsx)(d,{className:e}),(0,h.jsx)(u,{children:t})]})}function m(e){const t=(0,a.A)(),n=(0,o.OC)(e);return(0,h.jsx)(o.O_,{value:n,children:(0,h.jsx)(p,{className:e.className,children:(0,o.vT)(e.children)})},String(t))}},47751(e,t,n){n.d(t,{OC:()=>m,O_:()=>y,uc:()=>x,vT:()=>h});var s=n(96540),r=n(90612),o=n(205),i=n(57485),a=n(70679),l=n(31682),c=n(74848);function h(e){return s.Children.toArray(e).filter(e=>"\n"!==e)}function d(e){const{values:t,children:n}=e;return(0,s.useMemo)(()=>{const e=t??function(e){return s.Children.toArray(e).flatMap(e=>{if(!e)return[];if((0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return[e];

1const t="string"==typeof e.type?e.type:e.type.name;throw new Error(`Docusaurus error: Bad <Tabs> child <${t}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.\nIf you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:t,attributes:n,default:s}})=>({value:e,label:t,attributes:n,default:s}))}(n);return function(e){const t=(0,l.XI)(e,(e,t)=>e.value===t.value);if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[t,n])}function u({value:e,tabValues:t}){return t.some(t=>t.value===e)}function p({queryString:e=!1,groupId:t}){const n=(0,r.W6)(),o=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,i.aZ)(o),(0,s.useCallback)(e=>{if(!o)return;const t=new URLSearchParams(n.location.search);t.set(o,e),n.replace({...n.location,search:t.toString()})},[o,n])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,i=d(e),[l,c]=(0,s.useState)(()=>function({defaultValue:e,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!u({value:e,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const n=t.find(e=>e.default)??t[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:i})),[h,m]=p({queryString:n,groupId:r}),[b,x]=function({groupId:e}){const t=function(e){return e?`docusaurus.tab.${e}`:null}(e),[n,r]=(0,a.Dv)(t);return[n,(0,s.useCallback)(e=>{t&&r.set(e)},[t,r])]}({groupId:r}),y=(()=>{const e=h??b;return u({value:e,tabValues:i})?e:null})();(0,o.A)(()=>{y&&c(y)},[y]);return{selectedValue:l,selectValue:(0,s.useCallback)(e=>{if(!u({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);c(e),m(e),x(e)},[m,x,i]),tabValues:i,lazy:e.lazy??!1,block:e.block??!1}}const b=(0,s.createContext)(null);function x(){const e=s.useContext(b);if(!e)throw new Error("useTabsContext() must be used within a Tabs component");return e}function y(e){return(0,c.jsx)(b.Provider,{value:e.value,children:e.children})}},28453(e,t,n){n.d(t,{R:()=>i,x:()=>a});var s=n(96540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);