1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[3733],{28205(e,n,d){d.r(n),d.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>a,frontMatter:()=>t,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"id":"widgetApiReference","title":"Widget API reference","description":"Widget API reference via onBambuserWidgetReady: widget object Channel events PRESENT/PLAY/SHARE, FAB events, widget.on listener, setTrackingTags, payloads.","source":"@site/live/widgetApiReference.mdx","sourceDirName":".","slug":"/widget-api-reference","permalink":"/docs/live/widget-api-reference","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"widgetApiReference","title":"Widget API reference","description":"Widget API reference via onBambuserWidgetReady: widget object Channel events PRESENT/PLAY/SHARE, FAB events, widget.on listener, setTrackingTags, payloads.","sidebar_label":"Widget API reference","slug":"widget-api-reference"},"sidebar":"someSidebars","previous":{"title":"FAB integration","permalink":"/docs/live/fab-integration"},"next":{"title":"Multi-market products","permalink":"/docs/live/multi-market-products"}}');var i=d(74848),r=d(28453);const t={id:"widgetApiReference",title:"Widget API reference",description:"Widget API reference via onBambuserWidgetReady: widget object Channel events PRESENT/PLAY/SHARE, FAB events, widget.on listener, setTrackingTags, payloads.",sidebar_label:"Widget API reference",slug:"widget-api-reference"},c=void 0,l={},h=[{value:"Constants",id:"constants",level:2},{value:"<code>widget.EVENT.CHANNEL</code>",id:"widgeteventchannel",level:3},{value:"<code>.PRESENT</code>
1",id:"present",level:4},{value:"<code>.PLAY</code>",id:"play",level:4},{value:"<code>.SHARE</code>",id:"share",level:4},{value:"<code>.ADD_TO_CALENDAR</code>",id:"add_to_calendar",level:4},{value:"<code>widget.EVENT.FLOATING</code>",id:"widgeteventfloating",level:3},{value:"<code>.PRESENT</code>",id:"present-1",level:4},{value:"<code>.PLAY</code>",id:"play-1",level:4},{value:"<code>.NAVIGATE</code>",id:"navigate",level:4},{value:"<code>.DISMISS</code>",id:"dismiss",level:4},{value:"<code>.CONDENSE</code>",id:"condense",level:4},{value:"<code>.EXPAND</code>",id:"expand",level:4},{value:"Methods",id:"methods",level:2},{value:"<code>widget.configure(configuration)</code>",id:"widgetconfigureconfiguration",level:3},{value:"<strong><code>configuration.channel.shareBaseUrl</code></strong>",id:"configurationchannelsharebaseurl",level:4},{value:"<strong><code>configuration.channel.ui</code></strong>",id:"configurationchannelui",level:4},{value:"<strong><code>configuration.fab.redirection</code></strong>",id:"configurationfabredirection",level:4},{value:"<strong><code>configuration.trackingTags</code></strong>",id:"configurationtrackingtags",level:4},{value:"<code>widget.on(eventName, eventHandler)</code>",id:"widgetoneventname-eventhandler",level:3},{value:"<code>widget.off(eventName, eventHandler)</code>",id:"widgetoffeventname-eventhandler",level:3},{value:"<code>widget.removeAllListeners()</code>",id:"widgetremovealllisteners",level:3},{value:"<code>widget.setTrackingTags(trackingTags)</code>",id:"widgetsettrackingtagstrackingtags",level:3}];function o(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",br:"br",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components},{Details:d}=n;return d||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("b",{children:" Bambuser Widget API reference guide "}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsxs)(n.p,{children:["After setting up your ",(0,i.jsx)(n.code,{children:"onBambuserWidgetReady"})," handler (example below) you can start customizing the behavior of your widget."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"<head>\n <script>\n window.onBambuserWidgetReady = widget => {\n // widget = Bambuser Widget API\n };\n <\/script>\n</head>\n"})}),"\n",(0,i.jsxs)(n.admonition,{type:"caution",children:[(0,i.jsxs)(n.p,{children:["Note that the ",(0,i.jsx)(n.code,{children:"widget"})," object and its properties (constants and methods below) are only accessible within the ",(0,i.jsx)(n.code,{children:"onBambuserWidgetReady"})," method body."]}),(0,i.jsxs)(n.p,{children:["You should define the ",(0,i.jsx)(n.code,{children:"onBambuserWidgetReady"})," method before ",(0,i.jsx)(n.a,{href:"/live/fab-integration#embedding-the-fab",children:"FAB"})," and/or ",(0,i.jsx)(n.a,{href:"/live/channel#embed-the-code-snippet",children:"Channels"})," widgets embed snippets."]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"constants",children:"Constants"}),"\n",(0,i.jsx)(n.p,{children:"A list of available constants to be used throughout the widget integration."}),"\n",(0,i.jsx)(n.h3,{id:"widgeteventchannel",children:(0,i.jsx)(n.code,{children:"widget.EVENT.CHANNEL"})}),"\n",(0,i.jsxs)(n.p,{children:["Events specific to the Channels widget. Use ",(0,i.jsx)(n.a,{href:"#widgetoneventname-eventhandler",children:(0,i.jsx)(n.strong,{children:"widget.on()"})})," to register an event listener (described further down)."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"present",children:(0,i.jsx)(n.code,{children:".PRESENT"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"The Channel widget is rendered inside the embedded container."}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.CHANNEL.PRESENT, (eventData) =>
1 {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.CHANNEL.PRESENT');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser Channel widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:"String"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"playlists"})}),(0,i.jsx)(n.td,{children:"List of playlists including details and shows' data."}),(0,i.jsx)(n.td,{children:"Array"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"locale"})}),(0,i.jsxs)(n.td,{children:["The effective locale code ex. ",(0,i.jsx)(n.code,{children:"en-US"})]}),(0,i.jsx)(n.td,{children:"String"})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"play",children:(0,i.jsx)(n.code,{children:".PLAY"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Triggered after a user triggers the player by clicking on a show."}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.CHANNEL.PLAY, (eventData) => {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.CHANNEL.PLAY');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show that is played through Channel"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showTitle"})}),(0,i.jsx)(n.td,{children:"Title of the show"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showStatus"})}),(0,i.jsx)(n.td,{children:"Could be 'live', 'recorded', 'scheduled', or 'upcoming'"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"share",children:(0,i.jsx)(n.code,{children:".SHARE"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"A show's 'share' button is clicked from the Channel widget."}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.CHANNEL.SHARE, (eventData) => {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.CHANNEL.SHARE');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show that is played through Channel"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showTitle"})}),(0,i.jsx)(n.td,{children:"Title of the show"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showDescription"})}),(0,i.jsx)(n.td,{children:"Description of the show"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showStatus"})}),(0,i.jsx)(n.td,{children:"Could be 'live', 'recorded', 'scheduled', or 'upcoming'"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"scheduledStartAt"})}),(0,i.jsx)(n.td,{children:"Scheduled show time to go Live"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"String"})," ( ISO 8601 ) | ",(0,i.jsx)(n.code,{children:"null"})]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"shareUrl"})}),(0,i.jsxs)(n.td,{children:["Share URL by default uses the current page as the based URL. ",(0,i.jsx)(n.a,{href:"#configurationchannelsharebaseurl",children:"Configure shareBaseUrl"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"add_to_calendar",children:(0,i.jsx)(n.code,{children:".ADD_TO_CALENDAR"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"The 'add to calendar' button of a show on the Channel widget is clicked."}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.CHANNEL.ADD_TO_CALENDAR, (eventData) =>
1 {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.CHANNEL.ADD_TO_CALENDAR');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show that is played through Channel"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showTitle"})}),(0,i.jsx)(n.td,{children:"Title of the show"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showDescription"})}),(0,i.jsx)(n.td,{children:"Description of the show"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showStatus"})}),(0,i.jsx)(n.td,{children:"Could be 'live', 'recorded', 'scheduled', or 'upcoming'"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"scheduledStartAt"})}),(0,i.jsx)(n.td,{children:"Scheduled show time to go Live"}),(0,i.jsxs)(n.td,{children:[(0,i.jsx)(n.code,{children:"String"})," ( ISO 8601 )"]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"shareUrl"})}),(0,i.jsxs)(n.td,{children:["Share URL by default uses the current page as the based URL. ",(0,i.jsx)(n.a,{href:"#configurationchannelsharebaseurl",children:"Configure shareBaseUrl"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"widgeteventfloating",children:(0,i.jsx)(n.code,{children:"widget.EVENT.FLOATING"})}),"\n",(0,i.jsxs)(n.p,{children:["Events specific to the Floating Action Button (FAB). Use ",(0,i.jsx)(n.a,{href:"#widgetoneventname-eventhandler",children:(0,i.jsx)(n.strong,{children:"widget.on()"})})," to register an event listener (described further down)."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"present-1",children:(0,i.jsx)(n.code,{children:".PRESENT"})}),"\n",(0,i.jsx)(n.p,{children:"Emitted on the page load when the FAB widget is present on the page."}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.PRESENT, (eventData) => {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.FLOATING.PRESENT');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser FAB widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"present"})}),(0,i.jsx)(n.td,{children:"Whether the widget is visible or not"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Boolean"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show presented on the FAB"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showStatus"})}),(0,i.jsxs)(n.td,{children:["Can be ",(0,i.jsx)(n.code,{children:"live"})," or ",(0,i.jsx)(n.code,{children:"recorded"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"position"})}),(0,i.jsx)(n.td,{children:"Contains the widget position information"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Object"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"position.initial"})}),(0,i.jsxs)(n.td,{children:["Possible values: ",(0,i.jsx)(n.code,{children:"Bottom left"})," or ",(0,i.jsx)(n.code,{children:"Bottom right"}),". ",(0,i.jsx)("br",{})," The initial position can be changed through the Widgets > FAB setup page in the workspace."]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"position.offset"})}),(0,i.jsxs)(n.td,{children:["Returns the effective offsets. ",(0,i.jsx)(n.a,{href:"/live/fab-integration#apply-custom-offset",children:"How to apply custom offsets"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Object"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"position.offset.x"})}),(0,i.jsx)(n.td,{children:"Effective offset in the X axis."}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Number"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"position.offset.y"})}),(0,i.jsx)(n.td,{children:"Effective offset in the Y axis."}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Number"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"play-1",children:(0,i.jsx)(n.code,{children:".PLAY"})}),"\n","Triggered after a user triggers the player by clicking on the FAB preview video."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.PLAY, (eventData) =>
1 {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.FLOATING.PLAY');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser FAB widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show presented on the FAB"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showStatus"})}),(0,i.jsxs)(n.td,{children:["Can be ",(0,i.jsx)(n.code,{children:"live"})," or ",(0,i.jsx)(n.code,{children:"recorded"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"navigate",children:(0,i.jsx)(n.code,{children:".NAVIGATE"})}),"\n","Triggered after a user clicks on the FAB preview video while a redirection URL is set for FAB. The redirection URL can whether be set in the workspace on through ",(0,i.jsx)(n.a,{href:"#configurationfabredirection",children:"FAB configurations code"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.NAVIGATE, (eventData) => {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.FLOATING.PLAY');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser FAB widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show presented on the FAB"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showStatus"})}),(0,i.jsxs)(n.td,{children:["Can be ",(0,i.jsx)(n.code,{children:"live"})," or ",(0,i.jsx)(n.code,{children:"recorded"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"redirection"})}),(0,i.jsx)(n.td,{children:"Includes the effective redirection details"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Object"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"redirection.url"})}),(0,i.jsx)(n.td,{children:"URL of the landing page"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"redirection.target"})}),(0,i.jsxs)(n.td,{children:["Redirection target ex: ",(0,i.jsx)(n.code,{children:"_self"}),", ",(0,i.jsx)(n.code,{children:"_blank"}),", ",(0,i.jsx)(n.code,{children:"_parent"}),", or ",(0,i.jsx)(n.code,{children:"_top"}),". (Default: ",(0,i.jsx)(n.code,{children:"_self"}),")"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"dismiss",children:(0,i.jsx)(n.code,{children:".DISMISS"})}),"\n",(0,i.jsxs)(n.p,{children:["Triggered when the FAB is dismissed (hidden). This action is only possible for FAB presenting a ",(0,i.jsx)(n.strong,{children:"recorded"})," show."]}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.DISMISS, (eventData) =>
1 {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.FLOATING.DISMISS');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser FAB widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showId"})}),(0,i.jsx)(n.td,{children:"ID of the show presented on the FAB"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})]})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"condense",children:(0,i.jsx)(n.code,{children:".CONDENSE"})}),"\n",(0,i.jsxs)(n.p,{children:["Triggered when the FAB is condensed. This action is only possible when FAB is showing a ",(0,i.jsx)(n.strong,{children:"Live"})," video."]}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.CONDENSE, (eventData) => {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.FLOATING.CONDENSE');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser FAB widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})})]})]}),"\n",(0,i.jsx)(n.hr,{}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"expand",children:(0,i.jsx)(n.code,{children:".EXPAND"})}),"\n",(0,i.jsxs)(n.p,{children:["Triggered when the FAB is expanded to the preview player from the condensed mode. This action is only possible when FAB is showing a ",(0,i.jsx)(n.strong,{children:"Live"})," video."]}),"\n",(0,i.jsx)(n.p,{children:"Example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.EXPAND, (eventData) => {\n console.log('\ud83e\udde9 Triggered event: widget.EVENT.FLOATING.EXPAND');\n console.log('\ud83e\udde9 Event payload:', eventData);\n});\n"})}),"\n",(0,i.jsxs)(d,{style:{cursor:"pointer"},children:[(0,i.jsx)("summary",{children:(0,i.jsx)("b",{children:"Event payload"})}),(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Content"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Description"})}),(0,i.jsx)(n.th,{children:(0,i.jsx)(n.strong,{children:"Type"})})]})}),(0,i.jsx)(n.tbody,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"containerId"})}),(0,i.jsxs)(n.td,{children:["Bambuser FAB widget container ID attached to the ",(0,i.jsx)(n.code,{children:"data-bambuser-liveshopping-widget-id"})," attribute"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String"})})]})})]})]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,i.jsx)(n.h3,{id:"widgetconfigureconfiguration",children:(0,i.jsx)(n.code,{children:"widget.configure(configuration)"})}),"\n",(0,i.jsx)(n.p,{children:"This method accepts the configuration for your widgets."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.configure({\n channel: {\n // Configurations for Channel\n },\n fab: {\n // Configurations for FAB\n },\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"Below are the available configuration options:"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Channel"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"configurationchannelsharebaseurl",children:(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.code,{children:"configuration.channel.shareBaseUrl"})})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["Overrides the base URL for creating a link to access the show for both Share and AddToCalendar features.\nThe URL must be an absolute path and can include protocol (",(0,i.jsx)(n.code,{children:"http://"})," or ",(0,i.jsx)(n.code,{children:"https://"}),") and query parameters."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Default"}),": ",(0,i.jsx)(n.code,{children:"window.location.href"})]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.configure({\n channel: {\n shareBaseUrl: 'https://example.com/live-shopping?referer=joe', \n },\n});\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"configurationchannelui",children:(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.code,{children:"configuration.channel.ui"})})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"Hide specific elements of the Channel UI. Here are a list of available properties:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"hideShareButton"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"hideShareList"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"hideAddToCalendarButton"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"hideAddToCalendarList"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.configure({\n channel: {\n ui: {\n hideShareList: true,\n hideAddToCalendarList: true,\n }, \n },\n});\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Floating Action Button (FAB)"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"configurationfabredirection",children:(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.code,{children:"configuration.fab.redirection"})})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"A redirection URL to navigate user to after clicking on the Floating Action Button (FAB) to play the show.\nProperties:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"url"}),": A string containing an absolute or relative URL.",(0,i.jsx)(n.br,{}),"\n",(0,i.jsx)(n.strong,{children:"Note"})," that in Bambuser workspace > Widgets > FAB, you can also set a redirection URL that takes precedence over the URL configured here."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"target"}),": Redirection target ex: ",(0,i.jsx)(n.code,{children:"_self"}),", ",(0,i.jsx)(n.code,{children:"_blank"}),", ",(0,i.jsx)(n.code,{children:"_parent"}),", or ",(0,i.jsx)(n.code,{children:"_top"}),". (Default: ",(0,i.jsx)(n.code,{children:"_self"}),")"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.configure({\n fab: {\n redirection: {\n url: 'https://mybrand.com/video-shopping',\n target: '_blank',\n }, \n },\n});\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Tracking Tags"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.h4,{id:"configurationtrackingtags",children:(0,i.jsx)(n.strong,{children:(0,i.jsx)(n.code,{children:"configuration.trackingTags"})})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["A list of tags which will be sent once at the beginning of the session via the ",(0,i.jsx)(n.code,{children:"on-configuration"})," event. The tags are ",(0,i.jsx)(n.strong,{children:"not"})," attached to all tracking events. Instead, they are sent once during initialization, and Bambuser's backend aggregation system stitches them together with the session data."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.configure({\n trackingTags: [{\n key: 'customerId',\n value: '123-abc',\n }],\n});\n"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"widgetoneventname-eventhandler",children:(0,i.jsx)(n.code,{children:"widget.on(eventName, eventHandler)"})}),"\n",(0,i.jsxs)(n.p,{children:["Registers an event listener for any event from the ",(0,i.jsx)(n.a,{href:"#constants",children:"EVENT constants"})," above."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.PRESENT, () => {\n console.log('Floating widget presented');\n});\n"})}),"\n",(0,i.jsx)(n.h3,{id:"widgetoffeventname-eventhandler",children:(0,i.jsx)(n.code,{children:"widget.off(eventName, eventHandler)"})}),"\n",(0,i.jsx)(n.p,{children:"Removes a previously registered event listener from receiving any more events."}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsx)(n.p,{children:"The second parameter needs to be the same handler method provided at the time of registering the event listener."})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"// Define an event listener\nconst someEventHandler = () => {\n console.log('Floating widget dismissed');\n};\n\n// Register the listener from this point. Any dismissal event\n// will trigger the console.log above\nwidget.on(widget.EVENT.FLOATING.DISMISS, someEventHandler);\n\n// Removes the registered listener from this point. Dismissal events\n// will no longer trigger the console.log\nwidget.off(widget.EVENT.FLOATING.DISMISS, someEventHandler);\n"})}),"\n",(0,i.jsx)(n.h3,{id:"widgetremovealllisteners",children:(0,i.jsx)(n.code,{children:"widget.removeAllListeners()"})}),"\n",(0,i.jsxs)(n.p,{children:["Removes all event listeners defined by ",(0,i.jsx)(n.code,{children:"widget.on()"})," . Use this sparsely and with caution."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.on(widget.EVENT.FLOATING.PRESENT, (eventData) =>
1 {\n console.log('Floating widget presented', eventData);\n});\nwidget.on(widget.EVENT.FLOATING.DISMISS, (eventData) => {\n console.log('Floating widget dismissed', eventData);\n});\n\n// After this point, the above listeners will not be triggered again\nwidget.removeAllListeners();\n"})}),"\n",(0,i.jsx)(n.h3,{id:"widgetsettrackingtagstrackingtags",children:(0,i.jsx)(n.code,{children:"widget.setTrackingTags(trackingTags)"})}),"\n",(0,i.jsxs)(n.p,{children:["Sends a list of custom tracking tags once at the beginning of the session. The tags are sent via the ",(0,i.jsx)(n.code,{children:"on-configuration"})," event and are ",(0,i.jsx)(n.strong,{children:"not"})," attached to all tracking events. Instead, Bambuser's backend aggregation system stitches them together with the session data."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Usage example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"widget.setTrackingTags([\n {\n key: 'customerId',\n value: '123-abc',\n },\n {\n key: 'membership',\n value: 'premium',\n }\n]);\n"})})]})}function a(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},28453(e,n,d){d.d(n,{R:()=>t,x:()=>c});var s=d(96540);const i={},r=s.createContext(i);function t(e){const n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),s.createElement(r.Provider,{value:n},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.