https://clipreply.com/_next/static/chunks/pages/docs/widget-api-74c6ea7d87596204.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[880],{61182:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/widget-api",function(){return i(51637)}])},17410:function(e,t,i){"use strict";i.d(t,{Z:function(){return r}});var n=i(85893),a=i(67294),s=i(20637),d=i(99622),l=i(98683);i(53951);function r(e){var t=e.code,i=void 0===t?"":t,s=e.name,d=void 0===s?"index.js":s,r=e.lang,c=void 0===r?"js":r;return(0,a.useEffect)((function(){}),[]),(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"container flex flex-row-reverse flex-wrap items-center justify-center py-3",children:(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"col-span-3 bg-slate-800 rounded-xl shadow-lg xl:ml-0 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10",children:[(0,n.jsxs)("div",{className:"relative flex text-slate-400 text-xs leading-6",children:[(0,n.jsx)("div",{className:"mt-2 flex-none text-sky-300 border-t border-b border-t-transparent border-b-sky-300 px-4 py-1 flex items-center",children:d}),(0,n.jsx)("div",{className:"flex-auto flex pt-2 rounded-tr-xl overflow-hidden",children:(0,n.jsx)("div",{className:"flex-auto -mr-px bg-slate-700/50 border border-slate-500/30 rounded-tl"})}),(0,n.jsx)("div",{className:"absolute top-2 right-0 h-8 flex items-center pr-4",children:(0,n.jsx)("div",{className:"relative flex"})})]}),(0,n.jsx)("div",{className:"relative",children:(0,n.jsx)(l.Z,{language:c,children:i})})]})})})})}s.Z.registerLanguage("javascript",d.Z)},51637:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return o}});var n=i(85893),a=i(17410),s=i(9008),d=i(67294),l=i(89702);function r(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function c(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},n=Object.keys(i);"function"===typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter((function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})))),n.forEach((function(t){r(e,t,i[t])}))}return e}function o(){var e=(0,d.useState)({id:"auWdhzICBmFgfO0Nq6Qh",text:"I'm a widget",color:"#335eea",triggerStyle:"slim",position:"bottom-right",disabled:!1,debug:!1,loader:!0,dismissable:!0,demolishOnDismiss:!0,target:"body"}),t=e[0];e[1];console.log("widgetState",t);var i=(0,d.useState)({}),r=i[0],o=i[1];return(0,d.useEffect)((function(){var e=window.clipReplyWidgetCreateInstance(t);o(c({},e)),window.addEventListener("clipreply_widget.updated",(function(t){console.log(t.detail.state.frameId),t.detail.state.frameId==e.frameId&&o(c({},t.detail.state))})),setInterval((function(){}),3e3)}),[]),(0,d.useEffect)((function(){return function(){window.clipReplyWidgets.forEach((function(e){window.clipReplyWidgetModifyInstance(e.frameId,{disabled:!0})}))}}),[]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.default,{children:[(0,n.jsx)("title",{children:"ClipReply"}),(0,n.jsx)("meta",{name:"description",content:"The interactive video infrastructure for the internet."})]}),(0,n.jsxs)(l.Z,{children:[(0,n.jsxs)("h1",{children:[(0,n.jsx)("span",{className:"block text-base text-indigo-600 font-semibold tracking-wide uppercase",children:"Developer Guides"}),(0,n.jsx)("span",{className:"mt-2 block text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl",children:"ClipReply's Widget JavaScript API"})]}),(0,n.jsx)("hr",{className:"my-4"}),(0,n.jsx)("h2",{className:"mt-8 text-2xl text-black leading-10",children:"Load the widget JavaScript file."}),(0,n.jsx)("p",{className:"text-gray-500 leading-8",children:"Make sure to embed the widget js file. Place this script before the closeing body and before you call the function to create an widget."}),(0,n.jsx)(a.Z,{name:"index.html",code:'<script src="https://clipreply.com/widget/index.js"><\/script>'}),(0,n.jsx)("h2",{className:"mt-8 text-2xl text-black leading-10",children:"The Widget Config Object"}),(0,n.jsx)("p",{className:"text-gray-500 leading-8",children:"When we create a widget, and if you want to interact with it trough JavaScript we must save it to a variable to capture the frameId property. Being you can have multipe widgets loaded at one time, you must specify the frame id of the widget that you wish to modify the state."}),(0,n.jsx)(a.Z,{code:'\nvar myWidget = window.clipReplyWidgetCreateInstance({\n  id: "auWdhzICBmFgfO0Nq6Qh", // REPLACE WITH YOUR ID OF YOUR FLOW\n  text: "I\'m a widget",\n  color: "#335eea",\n  triggerStyle: "slim",\n  position: "bottom-right",\n  disabled: false,\n  open: false,\n  debug: false,\n  loader: true,\n  dismissable: true,\n  demolishOnDismiss: true,\n  target: "body"\n});\n'}),(0,n.jsx)("h2",{className:"mt-8 text-2xl text-black leading-10",children:"Changeing the widget's state"}),(0,n.jsx)("p",{className:"text-gray-500 leading-8",children:"Now you can modify the widgets state."}),(0,n.jsx)("small",{className:"text-blue-700",children:"edit flow > share > widget embeed"}),(0,n.jsx)(a.Z,{code:"window.clipReplyWidgetModifyInstance(myWidget.frameId, {open: false})"}),(0,n.jsx)(a.Z,{code:'window.clipReplyWidgetModifyInstance("'.concat(r.frameId,'", {text: "Click Me"})')}),(0,n.jsx)(a.Z,{code:'window.clipReplyWidgetModifyInstance("'.concat(r.frameId,'", {open: true})')}),(0,n.jsx)("h2",{className:"mt-8 text-2xl text-black leading-10",children:"Listening to state chenages"}),(0,n.jsx)(a.Z,{code:'\nlet initWidget = window.clipReplyWidgetCreateInstance({\n  id: "auWdhzICBmFgfO0Nq6Qh",\n  text: "I\'m a widget",\n  color: "#335eea",\n  triggerStyle: "slim",\n  position: "bottom-right",\n  disabled: false,\n  open: false,\n  debug: false,\n  loader: true,\n  dismissable: true,\n  demolishOnDismiss: true,\n  target: "body"\n});\nwindow.addEventListener("clipreply_widget.updated", (e) => {\n  if (e.detail.state.frameId == initWidget.frameId) {\n    initWidget = e.detail.state\n  }\n});\n'}),(0,n.jsx)("p",{className:"text-gray-500 leading-8",children:"Interact with the widget and see the state update in realtime."}),(0,n.jsx)("small",{className:"text-blue-700"}),(0,n.jsx)(a.Z,{code:JSON.stringify(r,null,2)})]})]})}}},function(e){e.O(0,[990,855,713,702,774,888,179],(function(){return t=61182,e(e.s=t);var t}));var t=e.O();_N_E=t}]);