CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="preload" href="/webfonts/ColfaxWebBold.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/webfonts/ColfaxWebRegular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><meta name="viewport" content="initial-scale=1.0, width=device-width"/><meta property="og:image" content="/openwidget-og.gif"/><meta name="google-site-verification" content="IqpKZrWSVrqn45y0JxfCtamCLDAn52T8Jn3yrs8g9p0"/><meta name="msvalidate.01" content="05EF7B502A1E06289A0922BAA9E5A07C"/><meta name="description" content="Use no-code widgets to quickly improve your websites. Add OpenWidget plugin to your website and improve engagement, increase sales and maximize profits!"/><link rel="canonical" href="https://openwidget.com/developers/js-api"/><title>OpenWidget JavaScript API</title><meta name="next-head-count" content="10"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-59df03576001c93c.js" defer=""></script><script src="/_next/static/chunks/framework-b0ec748c7a4c483a.js" defer=""></script><script src="/_next/static/chunks/main-42d362c76496bc28.js" defer=""></script><script src="/_next/static/chunks/pages/_app-02d736cffd94d348.js" defer=""></script><script src="/_next/static/chunks/1664-9ef36206028e4ef5.js" defer=""></script><script src="/_next/static/chunks/6734-04ad0569f5b22196.js" defer=""></script><script src="/_next/static/chunks/7524-e031248d9f773602.js" defer=""></script><script src="/_next/static/chunks/9810-5dfae7df416d6333.js" defer=""></script><script src="/_next/static/chunks/pages/developers/%5B...slug%5D-72582b7f07a1498a.js" defer=""></script><script src="/_next/static/yG92065Oc6-VoUHLeAEfR/_buildManifest.js" defer=""></script><script src="/_next/static/yG92065Oc6-VoUHLeAEfR/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 1zsak8">@font-face{font-family:'Noto Sans';src:url('/webfonts/NotoSansRegular.eot');src:url('/webfonts/NotoSansRegular.eot?#iefix') format('embedded-opentype'),url('/webfonts/NotoSansRegular.woff2') format('woff2'),url('/webfonts/NotoSansRegular.woff') format('woff');font-weight:400;font-style:normal;font-display:fallback;}@font-face{font-family:'Noto Sans';src:url('/webfonts/NotoSansBold.eot');src:url('/webfonts/NotoSansBold.eot?#iefix') format('embedded-opentype'),url('/webfonts/NotoSansBold.woff2') format('woff2'),url('/webfonts/NotoSansBold.woff') format('woff');font-weight:700;font-style:normal;font-display:fallback;}@font-face{font-family:'Colfax';src:url('/webfonts/ColfaxWebRegular.eot');src:url('/webfonts/ColfaxWebRegular.eot?#iefix') format('embedded-opentype'),url('/webfonts/ColfaxWebRegular.woff2') format('woff2'),url('/webfonts/ColfaxWebRegular.woff') format('woff');font-weight:400;font-style:normal;font-display:fallback;}@font-face{font-family:'Colfax';src:url('/webfonts/ColfaxWebMedium.eot');src:url('/webfonts/ColfaxWebMedium.eot?#iefix') format('embedded-opentype'),url('/webfonts/ColfaxWebMedium.woff2') format('woff2'),url('/webfonts/ColfaxWebMedium.woff') format('woff');font-weight:500;font-style:normal;font-display:fallback;}@font-face{font-family:'Colfax';src:url('/webfonts/ColfaxWebBold.eot');src:url('/webfonts/ColfaxWebBold.eot?#iefix') format('embedded-opentype'),url('/webfonts/ColfaxWebBold.woff2') format('woff2'),url('/webfonts/ColfaxWebBold.woff') format('woff');font-weight:700;font-style:normal;font-display:fallback;}body{margin:0;padding:0;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-black-50);color:var(--color-black-950);--font-size-8xl:110px;--font-size-9xl:220px;font-size:1.125rem;font-family:Colfax,colfax-web,Proxima Nova,Open Sans,Gill Sans MT,Gill Sans,Corbel,Arial,sans-serif;color:var(--color-black);font-weight:normal;line-height:1.55555556;--color-white:#ffffff;--color-black:#1b1b20;--color-black-25:#fcfcfc;--color-black-50:#f6f6f7;--color-black-75:#eeeeef;--color-black-100:#e2e2e4;--color-black-150:#c9c9cd;--color-black-200:#ababb1;--color-black-300:#8d8d95;--color-black-400:#767680;--color-black-500:#62626d;--color-black-600:#4e4e58;--color-black-700:#3b3b43;--color-black-800:#29292f;--color-black-900:#1b1b20;--color-black-950:#131317;--color-blue-50:#f4faff;--color-blue-100:#daedff;--color-blue-200:#9dceff;--color-blue-300:#68afff;--color-blue-400:#328dff;--color-blue-500:#0066ff;--color-blue-600:#0059e1;--color-blue-700:#004bc2;--color-blue-800:#003fa4;--color-blue-900:#003288;--color-yellow-50:#fff9ed;--color-yellow-100:#ffe9bc;--color-yellow-200:#fedc89;--color-yellow-300:#fed65e;--color-yellow-400:#ffd000;--color-yellow-500:#f3c600;--color-yellow-600:#e8bb00;--color-yellow-700:#c9a100;--color-yellow-800:#755b00;--color-yellow-900:#493700;--color-orange-50:#fff8f7;--color-orange-100:#ffe5e3;--color-orange-200:#ffb8af;--color-orange-300:#ff8a77;--color-orange-400:#ff5100;--color-orange-500:#d54300;--color-orange-600:#b43700;--color-orange-700:#9c2e00;--color-orange-800:#842600;--color-orange-900:#6c1d00;--color-red-50:#fff8f8;--color-red-100:#ffe5e5;--color-red-200:#ffb7b7;--color-red-300:#ff8889;--color-red-400:#ff4c4d;--color-red-500:#ee0007;--color-red-600:#ca0005;--color-red-700:#ae0003;--color-red-800:#930002;--color-red-900:#790002;--color-purple-50:#faf8ff;--color-purple-100:#eee8ff;--color-purple-200:#d1c0ff;--color-purple-300:#b99aff;--color-purple-400:#a372ff;--color-purple-500:#9146ff;--color-purple-600:#8609ff;--color-purple-700:#7400df;--color-purple-800:#6100bd;--color-purple-900:#50009c;--color-green-50:#f3fcf4;--color-green-100:#d1f4d5;--color-green-200:#7edd92;--color-green-300:#00c057;--color-green-400:#00a449;--color-green-500:#00893c;--color-green-600:#007331;--color-green-700:#006329;--color-green-800:#005321;--color-green-900:#00431a;}html{font-size:16px;}*{box-sizing:border-box;}a{color:inherit;}p strong{font-weight:500;}</style><style data-emotion="css z3nhnx">.css-z3nhnx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid var(--color-black-100);height:40px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.75rem;color:rgb(118, 117, 129);-webkit-column-gap:45px;column-gap:45px;}@media (max-width: 825px){.css-z3nhnx{display:none;}}.css-z3nhnx a{-webkit-text-decoration:none;text-decoration:none;}.css-z3nhnx>a{color:inherit;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-filter:grayscale(100%);filter:grayscale(100%);opacity:0.4;-webkit-transition:filter 0.3s,opacity 0.3s;transition:filter 0.3s,opacity 0.3s;}.css-z3nhnx>a:hover{opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}</style><div class="css-z3nhnx">Discover <a href="https://text.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbar">Text</a> products:<a href="https://www.livechat.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbar" target="_blank" rel="noreferrer"><svg height="32px" viewBox="0 0 430 155" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>LiveChat</title><path d="M116.64 87.3699C116.233 92.1208 114.043 96.5421 110.51 99.7456C106.976 102.949 102.361 104.698 97.5904 104.64H87.0853L67.0756 117.64V104.64L87.0853 91.6399H97.6104C99.0996 91.6937 100.554 91.1806 101.679 90.2043C102.804 89.2279 103.517 87.8611 103.673 86.3799C104.285 76.3875 104.235 66.3657 103.523 56.3799C103.403 55.0479 102.807 53.8037 101.844 52.8746C100.882 51.9455 99.6168 51.3937 98.2807 51.3199C91.4574 50.8999 84.2739 50.6399 77.0805 50.6399C69.887 50.6399 62.7035 50.8799 55.8802 51.3599C54.5441 51.4337 53.2792 51.9855 52.3167 52.9146C51.3541 53.8437 50.7581 55.0879 50.6377 56.4199C49.9261 66.4057 49.8759 76.4275 50.4876 86.4199C50.6531 87.8939 51.3699 89.2509 52.4943 90.219C53.6187 91.187 55.0675 91.6946 56.5505 91.6399H67.0756V104.64H56.5705C51.8056 104.687 47.1987 102.933 43.6735 99.7282C40.1482 96.5236 37.9649 92.1057 37.5613 87.3599C36.8996 76.7018 36.9498 66.0114 37.7114 55.3599C38.0896 50.9429 40.0345 46.8063 43.1955 43.6964C46.3564 40.5865 50.5251 38.7081 54.9497 38.3999C62.0732 37.8899 69.5768 37.6399 77.0805 37.6399C84.5841 37.6399 92.0877 37.8899 99.2112 38.3999C103.649 38.7002 107.833 40.5802 111.003 43.6992C114.173 46.8181 116.119 50.9693 116.49 55.3999C117.25 66.0414 117.3 76.7217 116.64 87.3699Z" fill="#FF5100"></path><path d="M137.061 94.6999H168.481V86.8199H146.581V47.0999H137.061V94.6999Z" fill="#1B1B20"></path><path d="M173.061 94.6999H182.311V59.3399H173.061V94.6999ZM172.311 50.0999C172.371 51.4854 172.963 52.7942 173.965 53.7534C174.966 54.7126 176.299 55.248 177.686 55.248C179.073 55.248 180.406 54.7126 181.407 53.7534C182.409 52.7942 183.001 51.4854 183.061 50.0999C183.092 49.3746 182.976 48.6504 182.72 47.971C182.464 47.2916 182.074 46.671 181.571 46.1467C181.069 45.6224 180.466 45.2051 179.798 44.92C179.131 44.635 178.412 44.488 177.686 44.488C176.96 44.488 176.241 44.635 175.574 44.92C174.906 45.2051 174.303 45.6224 173.801 46.1467C173.298 46.671 172.908 47.2916 172.652 47.971C172.396 48.6504 172.28 49.3746 172.311 50.0999Z" fill="#1B1B20"></path><path d="M218.541 59.3398H209.291L201.681 85.2498L194.061 59.3398H184.811L196.811 94.6998H206.461L218.541 59.3398Z" fill="#1B1B20"></path><path d="M235.061 95.5198C242.881 95.5198 249.211 90.8298 250.431 84.3698H242.341C241.451 86.8198 239.011 88.8598 235.061 88.8598C229.691 88.8598 227.581 85.2498 227.581 81.0998V80.2198H250.701V74.0298C250.701 65.5298 245.401 58.5298 234.931 58.5298C224.461 58.5298 218.611 65.3298 218.611 74.9198V79.7398C218.591 89.6398 225.061 95.5198 235.061 95.5198ZM227.561 73.3498C227.561 68.5898 229.561 65.0598 234.911 65.0598C239.911 65.0598 242.181 68.3898 242.181 72.8098V73.6898H227.561V73.3498Z" fill="#1B1B20"></path><path d="M275.261 95.6399C287.261 95.6399 294.711 87.4799 295.191 77.7499H286.351C285.731 83.1199 282.351 87.8199 275.261 87.8199C267.311 87.8199 263.911 82.3799 263.911 74.7599V67.0299C263.911 59.4099 267.311 53.9699 275.261 53.9699C282.331 53.9699 285.731 58.6599 286.351 64.0399H295.191C294.711 54.3099 287.301 46.1499 275.261 46.1499C260.911 46.1499 254.451 55.3299 254.451 67.4999V74.2999C254.451 86.4799 260.911 95.6399 275.261 95.6399Z" fill="#1B1B20"></path><path d="M300.211 94.7001H309.461V73.7601C309.461 69.0001 312.111 66.5501 316.261 66.5501C320.751 66.5501 322.721 69.4801 322.721 73.5501V94.7001H331.971V72.0601C331.971 63.7001 327.141 58.5301 319.461 58.5301C314.901 58.5301 311.301 60.5301 309.461 63.5301V45.0601H300.211V94.7001Z" fill="#1B1B20"></path><path d="M349.621 95.5198C353.701 95.5198 358.191 93.8198 359.821 91.4398V94.6998H368.731V72.1298C368.731 63.8998 362.681 58.5298 353.841 58.5298C346.221 58.5298 340.711 62.1998 338.671 69.0698H347.241C348.191 67.1598 350.161 65.7398 353.361 65.7398C357.171 65.7398 359.481 68.1798 359.481 71.4498V76.2798C356.913 74.2783 353.736 73.2193 350.481 73.2798C341.981 73.2798 336.201 76.8198 336.201 84.4998C336.221 91.3698 341.661 95.5198 349.621 95.5198ZM352.001 89.3998C348.121 89.3998 345.201 87.4998 345.201 84.2298C345.201 80.9598 347.921 79.2298 352.271 79.2298C356.421 79.2298 359.481 81.0698 359.481 84.2298C359.481 87.3898 356.061 89.3998 352.001 89.3998Z" fill="#1B1B20"></path><path d="M386.061 94.6999H392.451V87.2199H388.661C386.211 87.2199 385.331 86.2699 385.331 83.9599V66.8199H392.881V59.3399H385.331V49.6899H376.061V59.3399H371.061V66.8199H376.061V84.6399C376.061 90.8999 379.211 94.6999 386.061 94.6999Z" fill="#1B1B20"></path></svg></a><a href="https://www.chatbot.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbar" target="_blank" rel="noreferrer"><svg height="32px" viewBox="0 0 414 155" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>ChatBot</title><path d="M157.771 95.5129C169.771 95.5129 177.211 87.353 177.691 77.6229H168.851C168.241 82.993 164.851 87.6929 157.771 87.6929C149.771 87.6929 146.411 82.2529 146.411 74.6329V66.9029C146.411 59.2829 149.811 53.8429 157.771 53.8429C164.841 53.8429 168.241 58.5329 168.851 63.9129H177.691C177.211 54.1829 169.801 46.0229 157.771 46.0229C143.421 46.0229 136.961 55.2029 136.961 67.3729V74.1729C136.961 86.353 143.421 95.5129 157.771 95.5129Z" fill="#1B1B20"></path><path d="M182.721 94.5729H191.961V73.6329C191.961 68.8729 194.611 66.4229 198.761 66.4229C203.241 66.4229 205.221 69.3529 205.221 73.4229V94.5729H214.461V71.9329C214.461 63.5729 209.641 58.4029 201.951 58.4029C197.401 58.4029 193.791 60.4029 191.951 63.4029V44.9329H182.701L182.721 94.5729Z" fill="#1B1B20"></path><path d="M232.131 95.3928C236.211 95.3928 240.691 93.6928 242.331 91.3128V94.5728H251.231V72.0028C251.231 63.7728 245.181 58.4028 236.341 58.4028C228.731 58.4028 223.221 62.0728 221.181 68.9428H229.751C230.751 67.0328 232.671 65.6128 235.871 65.6128C239.671 65.6128 241.991 68.0528 241.991 71.3228V76.1528C239.423 74.1528 236.246 73.0939 232.991 73.1528C224.491 73.1528 218.711 76.6928 218.711 84.3728C218.731 91.2428 224.171 95.3928 232.131 95.3928ZM234.511 89.2728C230.631 89.2728 227.711 87.3728 227.711 84.1028C227.711 80.8328 230.431 79.1028 234.781 79.1028C238.931 79.1028 241.991 80.9428 241.991 84.1028C241.991 87.2628 238.591 89.2728 234.511 89.2728Z" fill="#1B1B20"></path><path d="M268.511 94.5727H274.961V87.0927H271.221C268.771 87.0927 267.881 86.1427 267.881 83.8327V66.6927H275.431V59.2127H267.881V49.5627H258.571V59.2127H253.571V66.6927H258.571V84.5127C258.521 90.7727 261.711 94.5727 268.511 94.5727Z" fill="#1B1B20"></path><path d="M279.961 94.5729H301.661C311.181 94.5729 317.771 89.1329 317.771 81.1829C317.771 74.7229 313.831 70.9829 308.931 69.9629C310.848 68.8601 312.422 67.2493 313.481 65.3082C314.54 63.3671 315.042 61.1712 314.931 58.9629C314.931 51.8229 309.691 46.9629 301.331 46.9629H279.961V94.5729ZM289.211 87.0929V74.0929H301.111C305.601 74.0929 308.251 76.6029 308.251 80.5529C308.251 84.5029 305.741 87.0729 301.181 87.0729L289.211 87.0929ZM289.211 66.6929V54.4529H299.141C303.081 54.4529 305.401 56.7729 305.401 60.3729C305.401 63.9729 303.221 66.6929 299.211 66.6929H289.211Z" fill="#1B1B20"></path><path d="M336.491 95.3928C347.101 95.3928 353.151 88.4528 353.151 79.3928V74.3928C353.151 65.3928 347.101 58.3928 336.491 58.3928C325.881 58.3928 319.831 65.3228 319.831 74.3928V79.3928C319.831 88.4528 325.881 95.3928 336.491 95.3928ZM344.171 80.0228C344.171 84.6528 341.731 88.1128 336.491 88.1128C331.251 88.1128 328.811 84.6528 328.811 80.0228V73.7728C328.811 69.1428 331.251 65.6728 336.491 65.6728C341.731 65.6728 344.171 69.1428 344.171 73.7728V80.0228Z" fill="#1B1B20"></path><path d="M369.551 94.5727H375.961V87.0927H372.221C369.771 87.0927 368.891 86.1427 368.891 83.8327V66.6927H376.441V59.2127H368.891V49.5627H359.571V59.2127H354.571V66.6927H359.571V84.5127C359.551 90.7727 362.751 94.5727 369.551 94.5727Z" fill="#1B1B20"></path><path d="M95.9611 68.903V76.733C95.9713 77.2638 95.8288 77.7864 95.5504 78.2385C95.2721 78.6905 94.8697 79.0531 94.3911 79.283C88.9411 81.8972 83.0031 83.3382 76.9611 83.513C70.9239 83.3434 64.9895 81.9092 59.5411 79.303C59.0584 79.0721 58.6525 78.7069 58.3722 78.251C58.0919 77.7951 57.9492 77.268 57.9611 76.733V68.903C57.9743 68.5443 58.0746 68.1942 58.2534 67.8829C58.4323 67.5717 58.6842 67.3087 58.9875 67.1167C59.2908 66.9247 59.6363 66.8094 59.9941 66.7809C60.3519 66.7524 60.7113 66.8115 61.0411 66.953C66.0653 69.1653 71.4732 70.3746 76.9611 70.513C82.4509 70.3807 87.862 69.1782 92.8911 66.973C93.219 66.834 93.5756 66.7763 93.9306 66.8049C94.2855 66.8334 94.6284 66.9472 94.9298 67.1368C95.2313 67.3263 95.4825 67.5859 95.6621 67.8934C95.8417 68.2009 95.9443 68.5473 95.9611 68.903Z" fill="#0066FF"></path><path d="M116.501 87.2429C116.095 91.9939 113.906 96.4152 110.374 99.6187C106.842 102.822 102.229 104.571 97.4611 104.513H86.9611L66.9611 117.513V104.513L86.9611 91.5129H97.4811C98.9696 91.5667 100.423 91.0537 101.548 90.0773C102.673 89.101 103.385 87.7342 103.541 86.2529C104.152 76.2606 104.102 66.2387 103.391 56.2529C103.271 54.9209 102.675 53.6767 101.713 52.7476C100.751 51.8186 99.4865 51.2667 98.1511 51.1929C91.3311 50.7729 84.1511 50.5129 76.9611 50.5129C69.7711 50.5129 62.5911 50.7529 55.7711 51.2329C54.4357 51.3067 53.1714 51.8586 52.2093 52.7876C51.2472 53.7167 50.6515 54.9609 50.5311 56.2929C49.8199 66.2787 49.7698 76.3006 50.3811 86.2929C50.5466 87.7669 51.2631 89.124 52.3869 90.092C53.5107 91.0601 54.9589 91.5676 56.4411 91.5129H66.9611V104.513H56.4611C51.6985 104.56 47.0939 102.806 43.5703 99.6013C40.0467 96.3967 37.8645 91.9787 37.4611 87.2329C36.7998 76.5748 36.8499 65.8844 37.6111 55.2329C37.9891 50.8159 39.9331 46.6793 43.0925 43.5695C46.2519 40.4596 50.4187 38.5811 54.8411 38.2729C61.9611 37.7629 69.4611 37.5129 76.9611 37.5129C84.4611 37.5129 91.9611 37.7629 99.0811 38.2729C103.517 38.5732 107.698 40.4533 110.867 43.5722C114.035 46.6912 115.981 50.8424 116.351 55.2729C117.111 65.9144 117.161 76.5948 116.501 87.2429Z" fill="#0066FF"></path></svg></a><a href="https://www.helpdesk.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbar" target="_blank" rel="noreferrer"><svg height="32px" viewBox="0 0 454 144" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>HelpDesk</title><path d="M136.99 94.05H146.51V74.4H165.99V94.05H175.51V46.45H165.99V65.99H146.51V46.45H136.99V94.05Z" fill="#1B1B20"></path><path d="M197.21 94.8699C205.03 94.8699 211.35 90.1799 212.58 83.7199H204.49C203.6 86.1599 201.15 88.1999 197.21 88.1999C191.84 88.1999 189.73 84.5999 189.73 80.4499V79.5699H212.85V73.3799C212.85 64.8799 207.55 57.8799 197.07 57.8799C186.59 57.8799 180.75 64.6799 180.75 74.2599V79.0899C180.75 88.9899 187.21 94.8699 197.21 94.8699ZM189.73 72.6999C189.73 67.9399 191.73 64.3999 197.07 64.3999C202.07 64.3999 204.35 67.7399 204.35 72.1599V73.0399H189.73V72.6999Z" fill="#1B1B20"></path><path d="M217.57 94.0499H226.82V44.4099H217.57V94.0499Z" fill="#1B1B20"></path><path d="M252.47 57.8799C247.37 57.8799 243.77 60.1899 242 62.8799V58.6899H233.16V105.88H242.41V90.2399C244.25 92.9599 247.85 94.8699 252.54 94.8699C262.06 94.8699 267.37 87.7999 267.37 79.2999V73.4499C267.37 65.0799 262.2 57.8799 252.47 57.8799ZM250.23 65.3599C255.6 65.3599 258.12 69.1599 258.12 73.8599V78.8599C258.12 83.8599 255.4 87.3599 250.12 87.3599C245.91 87.3599 242.37 84.3599 242.37 78.9899V73.8599C242.41 68.8899 245.54 65.3599 250.23 65.3599Z" fill="#1B1B20"></path><path d="M272.61 46.45V94.05H291.92C304.71 94.05 311.44 86.16 311.44 75.35V65.15C311.44 54.34 304.71 46.45 291.92 46.45H272.61ZM301.99 75.45C301.99 82.3899 297.99 86.33 290.29 86.33H282.06V54.2H290.29C297.97 54.2 301.99 58.15 301.99 65.08V75.45Z" fill="#1B1B20"></path><path d="M331.64 94.8699C339.46 94.8699 345.78 90.1799 347 83.7199H338.91C338.03 86.1599 335.58 88.1999 331.64 88.1999C326.26 88.1999 324.16 84.5999 324.16 80.4499V79.5699H347.28V73.3799C347.28 64.8799 341.97 57.8799 331.5 57.8799C321.03 57.8799 315.18 64.6799 315.18 74.2599V79.0899C315.18 88.9899 321.64 94.8699 331.64 94.8699ZM324.16 72.6999C324.16 67.9399 326.16 64.3999 331.5 64.3999C336.5 64.3999 338.78 67.7399 338.78 72.1599V73.0399H324.16V72.6999Z" fill="#1B1B20"></path><path d="M365.53 94.8699C374.3 94.8699 380.83 89.8699 380.83 83.0399C380.83 78.0399 378.18 75.2799 372.94 74.0399L362.2 71.3899C360.36 70.9799 359.48 70.1699 359.48 68.3899C359.48 65.8699 361.48 64.5099 365.26 64.5099C369.34 64.5099 371.04 66.4199 371.04 69.1399V69.7499H379.13V69.1999C379.13 62.1999 373.62 57.9199 365.13 57.9199C356.64 57.9199 350.85 61.9199 350.85 69.1999C350.85 74.5799 353.64 77.2999 358.94 78.5199L369.42 80.8999C371.42 81.3799 372.34 82.3999 372.34 84.0999C372.34 86.8199 369.48 88.3799 365.61 88.3799C361.26 88.3799 358.47 86.5399 358.47 83.4799V82.9899H350.31V83.5999C350.3 91.1299 356.55 94.8699 365.53 94.8699Z" fill="#1B1B20"></path><path d="M384.92 94.0499H394.17V76.7799L405.79 94.0499H416.33L403.75 75.9899L415.93 58.6899H405.39L394.17 75.1499V44.4099H384.92V94.0499Z" fill="#1B1B20"></path><path d="M76.99 67.68L97.36 49.99H76.99C69.78 49.99 62.61 50.23 55.79 50.7C54.457 50.7781 53.1963 51.3317 52.2367 52.2601C51.277 53.1886 50.6821 54.4303 50.56 55.76C50.23 59.99 49.99 65.27 49.99 70.53V73.45C49.99 78.71 50.21 83.96 50.55 88.18C50.6727 89.5102 51.2694 90.752 52.2312 91.6791C53.1931 92.6061 54.4561 93.1565 55.79 93.23C69.91 94.2 84.08 94.2 98.2 93.23C99.5328 93.1562 100.795 92.6054 101.755 91.6782C102.715 90.751 103.31 89.5094 103.43 88.18C103.75 84.18 103.94 79.27 103.98 74.3L116.99 62.99C116.99 62.99 116.99 70.79 116.99 73.42V74.27C116.99 79.58 116.74 84.86 116.4 89.19C116.028 93.6182 114.083 97.767 110.917 100.885C107.751 104.004 103.573 105.885 99.14 106.19C91.99 106.73 84.49 106.99 76.99 106.99C69.49 106.99 61.99 106.73 54.86 106.23C50.4233 105.927 46.2418 104.045 43.0735 100.925C39.9052 97.8041 37.9598 93.6516 37.59 89.22C37.23 84.66 36.99 79.05 36.99 73.45V70.53C36.99 64.92 37.24 59.31 37.59 54.75C37.9624 50.3212 39.9091 46.1724 43.0774 43.0555C46.2456 39.9386 50.4257 38.0599 54.86 37.76C61.99 37.25 69.48 36.99 76.99 36.99H116.99V49.99L76.99 84.71L58.3 68.5L68.12 59.99L76.99 67.68Z" fill="#2FC774"></path></svg></a><a href="https://www.knowledgebase.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbar" target="_blank" rel="noreferrer"><svg height="32px" viewBox="0 0 644 144" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>KnowledgeBase</title><path d="M137 94.0502H146.52V70.7302L163.73 94.0502H175L156.57 70.0502L174.4 46.4502H163.32L146.52 69.3002V46.4502H137V94.0502Z" fill="#1B1B20"></path><path d="M177.62 94.0501H186.86V73.1101C186.86 68.3501 189.52 65.9001 193.66 65.9001C198.15 65.9001 200.12 68.8201 200.12 72.9001V94.0501H209.37V71.4101C209.37 62.9101 204.54 57.8801 196.86 57.8801C191.86 57.8801 188.22 59.6401 186.46 62.8801V58.6901H177.62V94.0501Z" fill="#1B1B20"></path><path d="M230.22 94.8701C240.83 94.8701 246.88 87.9301 246.88 78.8701V73.8701C246.88 64.8701 240.88 57.8701 230.22 57.8701C219.56 57.8701 213.56 64.8001 213.56 73.8701V78.8701C213.56 87.9301 219.61 94.8701 230.22 94.8701ZM237.91 79.5001C237.91 84.1201 235.46 87.5901 230.22 87.5901C224.98 87.5901 222.54 84.1201 222.54 79.5001V73.2401C222.54 68.6201 224.99 65.1501 230.22 65.1501C235.45 65.1501 237.91 68.6201 237.91 73.2401V79.5001Z" fill="#1B1B20"></path><path d="M298.65 58.6902H289.65L284.5 82.4202L277.3 58.6902H268.86L261.65 82.4202L256.49 58.6902H247.49L256.67 94.0502H265.31L273.06 69.7102L280.81 94.0502H289.45L298.65 58.6902Z" fill="#1B1B20"></path><path d="M301.64 94.0502H310.89V44.4102H301.64V94.0502Z" fill="#1B1B20"></path><path d="M332.12 94.8701C339.94 94.8701 346.27 90.1801 347.49 83.7201H339.4C338.51 86.1601 336.07 88.2001 332.12 88.2001C326.75 88.2001 324.64 84.6001 324.64 80.4501V79.5701H347.76V73.3801C347.76 64.8801 342.46 57.8801 331.99 57.8801C321.52 57.8801 315.66 64.6801 315.66 74.2601V79.0901C315.66 88.9901 322.12 94.8701 332.12 94.8701ZM324.64 72.7001C324.64 67.9401 326.64 64.4001 331.99 64.4001C336.99 64.4001 339.26 67.7401 339.26 72.1601V73.0401H324.64V72.7001Z" fill="#1B1B20"></path><path d="M365.61 94.8702C370.71 94.8702 374.31 92.5602 376.08 89.8702V94.0802H384.92V44.4102H375.67V62.5002C373.67 59.8502 370.23 57.8802 365.54 57.8802C356.02 57.8802 350.72 64.9502 350.72 73.4502V79.3002C350.72 87.6602 356.09 94.8702 365.61 94.8702ZM367.85 87.3902C362.48 87.3902 359.97 83.5802 359.97 78.8902V73.8902C359.97 68.8902 362.69 65.3902 367.92 65.3902C372.14 65.3902 375.67 68.3902 375.67 73.7502V78.8902C375.67 83.8502 372.55 87.3902 367.85 87.3902Z" fill="#1B1B20"></path><path d="M406.49 106.7C416.35 106.7 423.42 100.85 423.42 93.3101V58.6901H414.58V62.9901C413.36 60.6101 409.58 57.8901 404.11 57.8901C394.45 57.8901 389.49 64.6901 389.49 72.5701V77.7401C389.49 85.4901 394.49 92.4301 404.04 92.4301C408.6 92.4301 412.68 90.0501 414.17 87.6001V93.1801C414.17 97.1201 411.17 99.7101 406.49 99.7101C402.89 99.7101 400.1 98.6201 398.87 96.1701H389.87C391.33 102.83 398.19 106.7 406.49 106.7ZM406.22 84.9901C401.22 84.9901 398.67 81.7201 398.67 77.2401V73.1801C398.67 68.3501 401.32 65.2901 406.49 65.2901C410.91 65.2901 414.17 68.4201 414.17 73.1801V77.2601C414.17 82.2201 410.57 84.9901 406.22 84.9901Z" fill="#1B1B20"></path><path d="M444.45 94.8701C452.27 94.8701 458.6 90.1801 459.82 83.7201H451.73C450.84 86.1601 448.4 88.2001 444.45 88.2001C439.08 88.2001 436.97 84.6001 436.97 80.4501V79.5701H460.09V73.3801C460.09 64.8801 454.79 57.8801 444.32 57.8801C433.85 57.8801 428 64.6801 428 74.2601V79.0901C428 88.9901 434.45 94.8701 444.45 94.8701ZM437 72.7001C437 67.9401 439 64.4001 444.35 64.4001C449.35 64.4001 451.62 67.7401 451.62 72.1601V73.0401H437V72.7001Z" fill="#1B1B20"></path><path d="M465.29 94.0502H487C496.51 94.0502 503.11 88.6102 503.11 80.6602C503.11 74.2002 499.17 70.4602 494.27 69.4402C496.186 68.3374 497.761 66.7266 498.82 64.7855C499.879 62.8444 500.38 60.6485 500.27 58.4402C500.27 51.3002 495.03 46.4402 486.67 46.4402H465.29V94.0502ZM474.54 86.5702V73.5702H486.44C490.93 73.5702 493.58 76.0902 493.58 80.0302C493.58 83.9702 491.06 86.5602 486.51 86.5602L474.54 86.5702ZM474.54 66.1702V53.9302H484.47C488.41 53.9302 490.72 56.2402 490.72 59.8502C490.72 63.4602 488.55 66.1702 484.54 66.1702H474.54Z" fill="#1B1B20"></path><path d="M518.6 94.8701C522.68 94.8701 527.17 93.1701 528.8 90.7901V94.0501H537.71V71.4801C537.71 63.2501 531.71 57.8801 522.82 57.8801C515.2 57.8801 509.7 61.5501 507.66 68.4201H516.22C517.22 66.5101 519.15 65.0801 522.34 65.0801C526.15 65.0801 528.46 67.5301 528.46 70.8001V75.6201C525.893 73.6179 522.715 72.5588 519.46 72.6201C510.96 72.6201 505.18 76.1601 505.18 83.8401C505.21 90.7201 510.65 94.8701 518.6 94.8701ZM521 88.7501C517.13 88.7501 514.2 86.8401 514.2 83.5801C514.2 80.3201 516.92 78.5801 521.28 78.5801C525.42 78.5801 528.48 80.4101 528.48 83.5801C528.48 86.7501 525.06 88.7501 521 88.7501Z" fill="#1B1B20"></path><path d="M557.22 94.8702C565.99 94.8702 572.52 89.8702 572.52 83.0402C572.52 78.0402 569.87 75.2802 564.63 74.0402L553.89 71.3902C552.05 70.9802 551.17 70.1702 551.17 68.3902C551.17 65.8702 553.17 64.5102 556.95 64.5102C561.03 64.5102 562.73 66.4202 562.73 69.1402V69.7502H570.82V69.2002C570.82 62.2002 565.31 57.9202 556.82 57.9202C548.33 57.9202 542.54 61.9202 542.54 69.2002C542.54 74.5802 545.33 77.3002 550.63 78.5202L561.11 80.9002C563.11 81.3802 564.03 82.4002 564.03 84.1002C564.03 86.8202 561.17 88.3802 557.3 88.3802C552.95 88.3802 550.16 86.5402 550.16 83.4802V82.9902H542V83.6002C542 91.1302 548.24 94.8702 557.22 94.8702Z" fill="#1B1B20"></path><path d="M591.5 94.8701C599.32 94.8701 605.65 90.1801 606.87 83.7201H598.78C597.89 86.1601 595.45 88.2001 591.5 88.2001C586.13 88.2001 584.02 84.6001 584.02 80.4501V79.5701H607.14V73.3801C607.14 64.8801 601.84 57.8801 591.37 57.8801C580.9 57.8801 575.05 64.6801 575.05 74.2601V79.0901C575.05 88.9901 581.51 94.8701 591.5 94.8701ZM584 72.7001C584 67.9401 586 64.4001 591.35 64.4001C596.35 64.4001 598.62 67.7401 598.62 72.1601V73.0401H584V72.7001Z" fill="#1B1B20"></path><path d="M104 50.39V36.99H103.36C92.21 37.44 83 44.7 77.32 50.37L77 50.68L76.68 50.37C71 44.7 61.79 37.44 50.64 36.99H50V50.39H37V73.45C37 79.05 37.24 84.66 37.6 89.22C37.9721 93.6498 39.9185 97.7999 43.0866 100.918C46.2546 104.037 50.4349 105.918 54.87 106.22C62 106.73 69.5 106.99 77 106.99C84.5 106.99 92 106.73 99.14 106.23C103.573 105.925 107.751 104.044 110.917 100.925C114.083 97.807 116.028 93.6582 116.4 89.23C116.76 84.67 116.97 79.06 117 73.46V50.39H104ZM104 73.45C104 78.71 103.78 83.96 103.44 88.18C103.32 89.5094 102.725 90.751 101.765 91.6782C100.805 92.6054 99.5428 93.1562 98.21 93.23C84.09 94.2 69.92 94.2 55.8 93.23C54.4661 93.1565 53.2031 92.6061 52.2413 91.6791C51.2794 90.752 50.6827 89.5102 50.56 88.18C50.22 83.99 50 78.71 50 73.45V50.39C59.44 50.79 68.76 60.84 71.59 64.8L77 72.32L82.41 64.8C85.24 60.8 94.57 50.8 104 50.39V73.45Z" fill="#9146FF"></path></svg></a></div><style data-emotion="css 1tlr60a">.css-1tlr60a{position:-webkit-sticky;position:sticky;z-index:100;top:0;width:100%;background-color:var(--color-black-50);}</style><header id="top-bar" class="css-1tlr60a"><style data-emotion="css 3ewn24">.css-3ewn24{max-width:1100px;margin:0 auto;scroll-margin-top:130px;max-width:1360px;background-color:var(--color-black-50);padding:20px 50px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (max-width: 1050px){.css-3ewn24{padding:10px 20px;}}</style><div class="css-3ewn24"><style data-emotion="css 11mcgsk">.css-11mcgsk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media (max-width: 1050px){.css-11mcgsk{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);transform-origin:center left;}}</style><a class="css-11mcgsk" href="/"><svg height="75px" viewBox="0 0 557 180" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>OpenWidget</title><mask id="mask0_5289_20051" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="37" width="80" height="71"><path d="M78.0011 37.418C85.4776 37.418 93.221 37.6902 100.163 38.2345C109.242 39.0511 116.718 46.128 117.519 55.6547L117.613 57.2993L117.71 59.3873C117.806 61.6774 117.903 66.8756 118 74.9819L117.95 77.6107C117.851 82.2037 117.701 86.3194 117.519 89.182C116.718 98.7086 109.242 105.786 100.163 106.602C93.8522 107.097 86.8788 107.367 80.046 107.412L77.9843 107.418C70.5078 107.418 62.7644 107.146 55.8219 106.601C46.7434 105.785 39.2669 98.7079 38.4659 89.1813L38.3721 87.5367L38.305 86.1398C38.1749 83.2306 38.0695 79.6519 38 75.8227V69.0139L38.0537 66.4066C38.1524 62.1451 38.2956 58.3465 38.4659 55.6554C39.2669 46.1287 46.7434 39.0518 55.8219 38.2352C62.1332 37.7403 69.1065 37.4704 75.9394 37.4254L78.0011 37.418ZM77.9927 50.7578L75.5483 50.7687L73.1856 50.8008C67.6771 50.8985 62.2053 51.1557 56.89 51.5725C53.9528 51.8447 51.8167 54.0222 51.5497 56.7441L51.4594 57.721C51.2137 60.6302 51.0542 64.7112 50.9613 69.195V75.6416L51.0203 78.1004C51.1306 82.1119 51.3018 85.6497 51.5497 88.0925C51.8167 90.8144 53.9528 92.9919 56.89 93.2641C62.2053 93.6809 67.6771 93.9381 73.1856 94.0358L75.5483 94.0679L78.1545 94.0788L80.4371 94.0686C86.7417 94.0091 93.0208 93.7411 99.0954 93.2648C102.033 92.9926 104.169 90.8151 104.436 88.0932L104.526 87.1163C104.827 83.5552 104.998 78.2382 105.077 72.5758L105.024 69.1943L104.965 66.7356C104.855 62.7241 104.684 59.1863 104.436 56.7434C104.169 54.0215 102.033 51.844 99.0954 51.5718C93.7801 51.155 88.3083 50.8978 82.7998 50.8001L80.4371 50.768L77.9927 50.7578Z" fill="white"></path></mask><g mask="url(#mask0_5289_20051)"><path fill-rule="evenodd" clip-rule="evenodd" d="M77.9927 22.4172C91.2993 22.4172 104.403 28.5837 113.387 37.062C113.564 37.2294 113.412 36.3408 114.614 38.1135L77.9927 72.4177V22.4172Z" fill="url(#paint0_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M113.387 37.0625C122.822 46.4875 127.708 59.4182 128.035 71.7903C128.041 71.9997 128.045 74.4473 128.048 74.6564L77.9927 72.4182L113.387 37.0625Z" fill="url(#paint1_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M128.048 72.4177C128.048 85.567 122.966 97.5307 114.658 106.456C114.402 106.732 113.294 107.504 113.032 107.773L77.9927 72.4177H128.048Z" fill="url(#paint2_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M113.881 107.273C104.461 116.683 91.0673 122.045 78.6828 122.403C78.4525 122.41 74.91 122.4 74.6804 122.403L77.9929 72.4177L113.881 107.273Z" fill="url(#paint3_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M77.9926 122.418C64.6168 122.418 51.9799 116.698 42.9865 108.146C42.8564 108.023 40.9362 105.876 40.8076 105.751L77.9926 72.4177V122.418Z" fill="url(#paint4_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M42.5985 107.773C33.2545 98.4396 28.3724 85.6675 27.9612 73.4047C27.9501 73.0754 27.9658 70.3896 27.9612 70.061L77.9927 72.4178L42.5985 107.773Z" fill="url(#paint5_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M27.9377 72.418C27.9377 59.1609 33.1028 47.1089 41.5323 38.1602C41.7215 37.9594 43.611 36.5724 43.8034 36.3748L77.9928 72.418H27.9377Z" fill="url(#paint6_linear_5289_20051)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M42.1047 37.5622C51.3761 28.3009 64.4973 22.9606 76.7167 22.4527C77.1432 22.435 78.4815 22.4232 78.9056 22.4172L77.9927 72.4177L42.1047 37.5622Z" fill="url(#paint7_linear_5289_20051)"></path></g><path d="M159.521 95.5873C173.73 95.5873 181.042 86.3016 181.042 74.0582V67.0424C181.042 54.799 173.73 45.5133 159.521 45.5133C145.381 45.5133 138 54.799 138 67.0424V74.0582C138 86.3016 145.381 95.5873 159.521 95.5873ZM159.521 87.6085C151.451 87.6085 147.657 82.1746 147.657 74.5397V66.5609C147.657 58.926 151.451 53.4921 159.521 53.4921C167.591 53.4921 171.385 58.926 171.385 66.5609V74.5397C171.385 82.1746 167.591 87.6085 159.521 87.6085ZM196.604 106.593V90.7725C198.467 93.5238 202.123 95.4497 206.882 95.4497C216.539 95.4497 221.919 88.2963 221.919 79.6984V73.7831C221.919 65.3228 216.677 58.0318 206.813 58.0318C201.64 58.0318 197.984 60.3704 196.191 63.1217V58.8572H187.223V106.593H196.604ZM204.468 87.8836C200.191 87.8836 196.604 84.8572 196.604 79.4233V74.1958C196.604 69.1746 199.777 65.5979 204.537 65.5979C209.986 65.5979 212.538 69.4498 212.538 74.1958V79.2857C212.538 84.3069 209.779 87.8836 204.468 87.8836ZM242.379 95.4497C250.311 95.4497 256.726 90.7037 257.968 84.1693H249.76C248.863 86.6455 246.38 88.709 242.379 88.709C236.93 88.709 234.791 85.0635 234.791 80.8677V79.9736H258.244V73.7143C258.244 65.1164 252.864 58.0318 242.241 58.0318C231.481 58.0318 225.686 64.9101 225.686 74.6085V79.4921C225.686 89.5344 232.239 95.4497 242.379 95.4497ZM249.622 73.3704H234.791V73.0265C234.791 68.2117 236.861 64.635 242.241 64.635C247.276 64.635 249.622 68.0053 249.622 72.4762V73.3704ZM272.978 94.6243V73.4392C272.978 68.6244 275.669 66.1482 279.876 66.1482C284.429 66.1482 286.429 69.1058 286.429 73.2328V94.6243H295.81V71.7196C295.81 63.1217 290.913 58.0318 283.118 58.0318C278.014 58.0318 274.358 59.8201 272.565 63.1217V58.8572H263.598V94.6243H272.978ZM320.546 94.6243L331.1 57.5503L341.654 94.6243H350.966L362.347 46.4763H352.828L345.861 81.2804L335.79 46.4763H326.41L316.339 81.2804L309.372 46.4763H299.853L311.234 94.6243H320.546ZM371.425 54.9366C374.598 54.9366 376.875 52.5979 376.875 49.5027C376.875 46.4075 374.598 44.0688 371.425 44.0688C368.252 44.0688 365.976 46.4075 365.976 49.5027C365.976 52.5979 368.252 54.9366 371.425 54.9366ZM376.116 94.6243V58.8572H366.735V94.6243H376.116ZM396.783 95.4497C401.956 95.4497 405.612 93.1111 407.405 90.3598V94.6243H416.372V44.4128H406.991V62.709C404.991 60.0265 401.473 58.0318 396.714 58.0318C387.057 58.0318 381.677 65.1852 381.677 73.7831V79.6984C381.677 88.1587 387.126 95.4497 396.783 95.4497ZM399.059 87.8836C393.61 87.8836 391.057 84.0318 391.057 79.2857V74.1958C391.057 69.1746 393.817 65.5979 399.128 65.5979C403.404 65.5979 406.991 68.6244 406.991 74.0582V79.2857C406.991 84.3069 403.818 87.8836 399.059 87.8836ZM438.97 107.418C448.972 107.418 456.146 101.503 456.146 93.8677V58.8572H447.179V63.1905C445.937 60.7831 442.074 58.0318 436.556 58.0318C426.761 58.0318 421.726 64.9101 421.726 72.8889V78.1164C421.726 85.9577 426.83 92.9735 436.487 92.9735C441.109 92.9735 445.247 90.5661 446.765 88.09V93.7302C446.765 97.7196 443.73 100.333 438.97 100.333C435.315 100.333 432.486 99.2328 431.245 96.7566H422.14C423.588 103.497 430.555 107.418 438.97 107.418ZM438.694 85.4762C433.59 85.4762 431.038 82.1746 431.038 77.6349V73.508C431.038 68.6244 433.728 65.5291 438.97 65.5291C443.454 65.5291 446.765 68.6932 446.765 73.508V77.6349C446.765 82.6561 443.109 85.4762 438.694 85.4762ZM478.192 95.4497C486.124 95.4497 492.539 90.7037 493.781 84.1693H485.573C484.676 86.6455 482.193 88.709 478.192 88.709C472.743 88.709 470.604 85.0635 470.604 80.8677V79.9736H494.057V73.7143C494.057 65.1164 488.677 58.0318 478.054 58.0318C467.294 58.0318 461.499 64.9101 461.499 74.6085V79.4921C461.499 89.5344 468.052 95.4497 478.192 95.4497ZM485.435 73.3704H470.604V73.0265C470.604 68.2117 472.674 64.635 478.054 64.635C483.089 64.635 485.435 68.0053 485.435 72.4762V73.3704ZM518.172 94.6243V87.0582H514.379C511.896 87.0582 510.999 86.0952 510.999 83.7566V66.4233H518.655V58.8572H510.999V49.09H501.549V58.8572H496.445V66.4233H501.549V84.4445C501.549 90.7725 504.791 94.6243 511.689 94.6243H518.172Z" fill="#1B1B20"></path><path d="M319.62 136.98H322.675V133.405H320.887C319.718 133.405 319.295 132.95 319.295 131.845V123.655H322.903V120.08H319.295V115.465H314.843V120.08H312.438V123.655H314.843V132.17C314.843 135.16 316.37 136.98 319.62 136.98Z" fill="#1B1B20"></path><path d="M332.313 137.37C336.05 137.37 339.073 135.128 339.658 132.04H335.79C335.368 133.21 334.198 134.185 332.313 134.185C329.745 134.185 328.738 132.463 328.738 130.48V130.058H339.788V127.1C339.788 123.038 337.253 119.69 332.248 119.69C327.178 119.69 324.448 122.94 324.448 127.523V129.83C324.448 134.575 327.535 137.37 332.313 137.37ZM328.738 126.775C328.738 124.5 329.713 122.81 332.248 122.81C334.62 122.81 335.725 124.403 335.725 126.515V126.938H328.738V126.775Z" fill="#1B1B20"></path><path d="M350.825 128.4L356.512 120.08H351.93L348.582 125.085L345.235 120.08H340.652L346.34 128.4L340.425 136.98H345.072L348.582 131.715L352.092 136.98H356.74L350.825 128.4Z" fill="#1B1B20"></path><path d="M364.244 136.98H367.299V133.405H365.512C364.342 133.405 363.919 132.95 363.919 131.845V123.655H367.527V120.08H363.919V115.465H359.467V120.08H357.062V123.655H359.467V132.17C359.467 135.16 360.994 136.98 364.244 136.98Z" fill="#1B1B20"></path><path d="M371.119 141.855H374.889V110.98H371.119V141.855Z" fill="#1B1B20"></path><path d="M297.818 142.54H295.44L297.529 137.064L291.391 120.949H293.801L298.815 134.64L303.635 120.949H306.046L299.972 137.064L297.818 142.54Z" fill="#1B1B20"></path><path d="M274.234 114.088H276.676V123.341C277.673 121.705 279.601 120.572 282.172 120.572C286.318 120.572 288.985 123.593 288.985 127.779V130.234C288.985 134.263 286.446 137.442 282.108 137.442C279.376 137.442 277.255 136.025 276.548 134.546V137.064H274.234V114.088ZM286.543 130.14V127.874C286.543 124.915 284.839 122.523 281.722 122.523C278.99 122.523 276.676 124.569 276.676 127.874V129.951C276.676 133.067 278.444 135.49 281.69 135.49C285.096 135.49 286.543 133.098 286.543 130.14Z" fill="#1B1B20"></path><path d="M259.533 114.088H261.975V137.064H259.661V134.546C258.954 136.025 256.833 137.442 254.101 137.442C249.763 137.442 247.224 134.263 247.224 130.234V127.779C247.224 123.593 249.891 120.572 254.037 120.572C256.608 120.572 258.536 121.705 259.533 123.341V114.088ZM249.666 127.874V130.14C249.666 133.098 251.112 135.49 254.519 135.49C257.765 135.49 259.533 133.067 259.533 129.951V127.874C259.533 124.569 257.219 122.523 254.487 122.523C251.369 122.523 249.666 124.915 249.666 127.874Z" fill="#1B1B20"></path><path d="M236.692 137.442C232.417 137.442 229.428 134.766 229.428 130.423V127.842C229.428 123.467 231.967 120.572 236.595 120.572C241.287 120.572 243.569 123.625 243.569 127.59V129.982H231.774V130.549C231.774 133.35 233.253 135.616 236.692 135.616C239.166 135.616 240.677 134.326 241.223 132.5H243.408C242.862 135.396 240.13 137.442 236.692 137.442ZM231.774 127.653V128.157H241.287V127.401C241.287 124.537 239.809 122.397 236.595 122.397C233.06 122.397 231.774 124.695 231.774 127.653Z" fill="#1B1B20"></path><path d="M219.153 137.064V120.949H221.435V124.663C222.045 122.177 223.813 120.855 226.802 120.855H227.188V123.089H226.705C223.588 123.089 221.595 125.104 221.595 129.164V137.064H219.153Z" fill="#1B1B20"></path><path d="M207.818 137.442C203.543 137.442 200.554 134.766 200.554 130.423V127.842C200.554 123.467 203.093 120.572 207.721 120.572C212.413 120.572 214.695 123.625 214.695 127.59V129.982H202.901V130.549C202.901 133.35 204.379 135.616 207.818 135.616C210.292 135.616 211.803 134.326 212.349 132.5H214.535C213.988 135.396 211.256 137.442 207.818 137.442ZM202.901 127.653V128.157H212.413V127.401C212.413 124.537 210.935 122.397 207.721 122.397C204.186 122.397 202.901 124.695 202.901 127.653Z" fill="#1B1B20"></path><path d="M197.985 120.949L193.485 137.064H191.171L186.801 123.467L182.43 137.064H180.116L175.616 120.949H177.93L181.401 134.2L185.644 120.949H187.958L192.2 134.2L195.671 120.949H197.985Z" fill="#1B1B20"></path><path d="M165.701 137.442C161.009 137.442 158.341 134.294 158.341 130.329V127.685C158.341 123.719 161.041 120.572 165.701 120.572C170.361 120.572 173.028 123.719 173.028 127.685V130.329C173.028 134.294 170.361 137.442 165.701 137.442ZM170.682 127.716C170.682 124.663 168.947 122.491 165.701 122.491C162.455 122.491 160.719 124.663 160.719 127.716V130.297C160.719 133.35 162.455 135.522 165.701 135.522C168.947 135.522 170.682 133.35 170.682 130.297V127.716Z" fill="#1B1B20"></path><path d="M142.443 142.54H140V120.949H142.314V123.467C143.021 121.988 145.142 120.572 147.874 120.572C152.277 120.572 154.751 123.687 154.751 127.779V130.234C154.751 134.42 152.084 137.442 147.938 137.442C145.367 137.442 143.439 136.309 142.443 134.672V142.54ZM152.309 130.14V127.874C152.309 124.915 150.863 122.523 147.456 122.523C144.21 122.523 142.443 124.946 142.443 128.062V130.14C142.443 133.444 144.756 135.49 147.488 135.49C150.606 135.49 152.309 133.098 152.309 130.14Z" fill="#1B1B20"></path><defs><linearGradient id="paint0_linear_5289_20051" x1="78.8466" y1="45.7316" x2="99.0961" y2="46.7887" gradientUnits="userSpaceOnUse"><stop stop-color="#B349D9"></stop><stop offset="1" stop-color="#F53547"></stop></linearGradient><linearGradient id="paint1_linear_5289_20051" x1="103.185" y1="45.5202" x2="104.4" y2="70.5793" gradientUnits="userSpaceOnUse"><stop stop-color="#F13354"></stop><stop offset="1" stop-color="#FF4200"></stop></linearGradient><linearGradient id="paint2_linear_5289_20051" x1="112.286" y1="74.088" x2="107.926" y2="94.6634" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4200"></stop><stop offset="1" stop-color="#FFD000"></stop></linearGradient><linearGradient id="paint3_linear_5289_20051" x1="99.3757" y1="95.8843" x2="79.7908" y2="95.2766" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD000"></stop><stop offset="1" stop-color="#72CE3A"></stop></linearGradient><linearGradient id="paint4_linear_5289_20051" x1="55.7778" y1="97.5772" x2="77.8327" y2="98.0511" gradientUnits="userSpaceOnUse"><stop stop-color="#02B296"></stop><stop offset="1" stop-color="#72CE3A"></stop></linearGradient><linearGradient id="paint5_linear_5289_20051" x1="43.926" y1="72.6065" x2="50.0191" y2="95.363" gradientUnits="userSpaceOnUse"><stop stop-color="#2173DA"></stop><stop offset="1" stop-color="#02B195"></stop></linearGradient><linearGradient id="paint6_linear_5289_20051" x1="56.4657" y1="54.3964" x2="49.2929" y2="64.8184" gradientUnits="userSpaceOnUse"><stop stop-color="#3750FF"></stop><stop offset="1" stop-color="#2172D9"></stop></linearGradient><linearGradient id="paint7_linear_5289_20051" x1="76.0953" y1="44.2503" x2="54.7569" y2="41.143" gradientUnits="userSpaceOnUse"><stop stop-color="#B44ADA"></stop><stop offset="1" stop-color="#364FFE"></stop></linearGradient></defs></svg></a><style data-emotion="css 1pmthf2">.css-1pmthf2{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;background-color:transparent;font-size:inherit;font-family:inherit;color:inherit;-webkit-text-decoration:none;text-decoration:none;display:none;padding:0;}@media (max-width: 825px){.css-1pmthf2{display:block;}}</style><button aria-label="Open menu" aria-expanded="false" aria-haspopup="true" class="css-1pmthf2"><style data-emotion="css 11efini">.css-11efini{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:currentColor;stroke:none;}</style><svg color="inherit" viewBox="0 0 256 256" aria-hidden="true" class="css-11efini"><g><line x1="40" y1="128" x2="216" y2="128" stroke="rgb(0, 0, 0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="64" x2="216" y2="64" stroke="rgb(0, 0, 0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="40" y1="192" x2="216" y2="192" stroke="rgb(0, 0, 0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></g></svg></button><style data-emotion="css 1p5hxg">.css-1p5hxg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;width:100%;margin-left:40px;}@media (max-width: 1050px){.css-1p5hxg{margin-left:10px;}}@media (max-width: 825px){.css-1p5hxg{display:none;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:absolute;background-color:var(--color-black-50);top:calc(100% + 1px);left:0;margin-left:0;border-bottom:1px solid var(--color-black-100);padding-bottom:10px;box-shadow:0px 0.6px 1.81px -0.92px rgba(0, 0, 0, 0.14),0px 2.29px 6.87px -1.83px rgba(0, 0, 0, 0.13177),0px 10px 30px -2.75px rgba(0, 0, 0, 0.1125);}}</style><div data-testid="menu" class="css-1p5hxg"><style data-emotion="css 9q4e21">.css-9q4e21>ul{list-style-type:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (max-width: 825px){.css-9q4e21>ul{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}}@media (max-width: 825px){.css-9q4e21 li{width:100%;}}@media (max-width: 825px){.css-9q4e21{width:100%;}}</style><nav class="css-9q4e21"><ul><style data-emotion="css uu4iy3">@media (min-width: 825px){.css-uu4iy3:hover>ul{display:grid;}}</style><li class="css-uu4iy3"><style data-emotion="css 1p4hu5m">.css-1p4hu5m{color:inherit;display:inline-block;padding:7px 8px;border-radius:10px;-webkit-text-decoration:none;text-decoration:none;line-height:1.5;cursor:pointer;white-space:nowrap;font-size:1rem;font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1p4hu5m:hover{background-color:var(--color-black-100);}@media (max-width: 900px){.css-1p4hu5m{font-size:0.9rem;}}@media (max-width: 825px){.css-1p4hu5m{display:block;padding:10px 15px;border-radius:0px;}}.css-1p4hu5m svg{-webkit-transition:-webkit-transform 0.1s ease-in-out;transition:transform 0.1s ease-in-out;}@media (max-width: 825px){.css-1p4hu5m{font-weight:bold;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media (min-width: 825px){.css-1p4hu5m:hover svg{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}}}</style><a class="css-1p4hu5m" href="/widgets">Widgets <style data-emotion="css v1l5z0">@media (max-width: 825px){.css-v1l5z0{display:none;}}</style><style data-emotion="css jmecxn">.css-jmecxn{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:18px;height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:currentColor;stroke:none;}@media (max-width: 825px){.css-jmecxn{display:none;}}</style><svg color="inherit" viewBox="0 96 960 960" aria-hidden="true" class="css-jmecxn"><path d="M480 711 240 471l43-43 197 198 197-197 43 43-240 239Z"></path></svg></a><style data-emotion="css blctap">.css-blctap{list-style-type:none;margin:0;padding:0;display:none;grid-template-columns:1fr;position:absolute;text-align:left;background-color:var(--color-black-50);box-shadow:0px 0.6px 1.81px -0.92px rgba(0, 0, 0, 0.14),0px 2.29px 6.87px -1.83px rgba(0, 0, 0, 0.13177),0px 10px 30px -2.75px rgba(0, 0, 0, 0.1125);border-radius:10px;padding:10px;font-size:1rem;}@media (max-width: 370px){.css-blctap{font-size:0.9rem;}}@media (max-width: 825px){.css-blctap{position:relative;grid-template-columns:1fr;box-shadow:none;}}</style><ul class="css-blctap"><li><style data-emotion="css 1428ns3">.css-1428ns3{color:inherit;display:inline-block;padding:7px 8px;border-radius:10px;-webkit-text-decoration:none;text-decoration:none;line-height:1.5;cursor:pointer;white-space:nowrap;font-size:1rem;font-weight:500;width:100%;text-align:left;font-weight:normal;}.css-1428ns3:hover{background-color:var(--color-black-100);}@media (max-width: 900px){.css-1428ns3{font-size:0.9rem;}}@media (max-width: 825px){.css-1428ns3{display:block;padding:10px 15px;border-radius:0px;}}</style><a class="css-1428ns3" href="/widgets/google-reviews">Google Reviews</a></li><li><a class="css-1428ns3" href="/widgets/whatsapp-chat-widget-for-website">WhatsApp Chat Widget</a></li><li><a class="css-1428ns3" href="/widgets/facebook-messenger-widget">Facebook Messenger Widget</a></li><li><a class="css-1428ns3" href="/widgets/chat-interface-for-open-ai-assistants">Chat Interface for OpenAI</a></li><li><a class="css-1428ns3" href="/widgets/custom-links-widget">Custom Links</a></li><li><a class="css-1428ns3" href="/widgets/bug-report-template">Bug Report Form</a></li><li><a class="css-1428ns3" href="/widgets/contact-form">Contact Form</a></li><li><a class="css-1428ns3" href="/widgets/feedback-form-template">Feedback Form</a></li><li><a class="css-1428ns3" href="/widgets/faq-template">FAQ Template</a></li><li><a class="css-1428ns3" href="/widgets/product-recommendations">Product Recommendations</a></li><li><a class="css-1428ns3" href="/widgets/product-cards">Product Cards</a></li><li><a class="css-1428ns3" href="/widgets/instagram-feed">Instagram Feed</a></li><li><a class="css-1428ns3" href="/widgets/visitor-counter">Visitor Counter</a></li><li><a class="css-1428ns3" href="/widgets/create-your-own">Create Your Own</a></li></ul></li><li class="css-uu4iy3">Industries <style data-emotion="css coldrl">.css-coldrl{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:18px;height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:currentColor;stroke:none;}</style><svg color="inherit" viewBox="0 96 960 960" aria-hidden="true" class="css-coldrl"><path d="M480 711 240 471l43-43 197 198 197-197 43 43-240 239Z"></path></svg><ul class="css-blctap"><li><a class="css-1428ns3" href="/industry/customer-service">Customer Service</a></li><li><a class="css-1428ns3" href="/industry/ecommerce">Ecommerce</a></li><li><a class="css-1428ns3" href="/industry/software-and-cloud">Software & Cloud</a></li></ul></li><li><style data-emotion="css 1rbms86">.css-1rbms86{color:inherit;display:inline-block;padding:7px 8px;border-radius:10px;-webkit-text-decoration:none;text-decoration:none;line-height:1.5;cursor:pointer;white-space:nowrap;font-size:1rem;font-weight:500;}.css-1rbms86:hover{background-color:var(--color-black-100);}@media (max-width: 900px){.css-1rbms86{font-size:0.9rem;}}@media (max-width: 825px){.css-1rbms86{display:block;padding:10px 15px;border-radius:0px;}}</style><a class="css-1rbms86" href="/pricing">Pricing</a></li><li class="css-uu4iy3">Resources <svg color="inherit" viewBox="0 96 960 960" aria-hidden="true" class="css-coldrl"><path d="M480 711 240 471l43-43 197 198 197-197 43 43-240 239Z"></path></svg><ul class="css-blctap"><li><a class="css-1428ns3" href="https://help.openwidget.com/add-openwidget-to-your-store/">Installation guides</a></li><li><a class="css-1428ns3" href="/integrations/google-reviews-for-wix">Google Reviews Widget for Wix</a></li><li><a class="css-1428ns3" href="/widgets/google-reviews/wordpress">Google Reviews Widget for WordPress</a></li><li><a class="css-1428ns3" href="/integrations/helpdesk">HelpDesk integration</a></li><li><a class="css-1428ns3" href="/widgets/instagram-feed/wordpress">Instagram for WordPress</a></li><li><a class="css-1428ns3" href="/integrations/livechat">LiveChat integration</a></li><li><a class="css-1428ns3" href="/integrations/wordpress">WordPress integration</a></li><li><a class="css-1428ns3" href="https://help.openwidget.com/">Help Center</a></li><li><a class="css-1428ns3" href="https://help.openwidget.com/openwidget-updates/">Updates</a></li><li><a class="css-1428ns3" href="/blog">Blog</a></li></ul></li><li class="css-uu4iy3">Developers <svg color="inherit" viewBox="0 96 960 960" aria-hidden="true" class="css-coldrl"><path d="M480 711 240 471l43-43 197 198 197-197 43 43-240 239Z"></path></svg><ul class="css-blctap"><li><a class="css-1428ns3" href="/developers/openwidget-apps">OpenWidget Apps</a></li><li><a class="css-1428ns3" href="/developers/js-api">JavaScript API</a></li><li><a class="css-1428ns3" href="/developers/guides/async-init">Asynchronous Initialization</a></li><li><a class="css-1428ns3" href="/developers/guides/html-attributes">HTML Attributes</a></li></ul></li></ul></nav><div class="css-9q4e21"><ul><li><a href="https://app.openwidget.com" class="css-1rbms86">Log In</a></li><li><style data-emotion="css 1vhouco">.css-1vhouco{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;background-color:transparent;font-size:inherit;font-family:inherit;color:inherit;-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-black-950);border-radius:10px;color:var(--color-white);display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:8px;padding:15px;line-height:1.1em;border:1px solid var(--color-black-950);font-size:1rem;letter-spacing:0.1px;cursor:pointer;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;}.css-1vhouco:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);}@media (max-width: 370px){.css-1vhouco{font-size:0.9rem;}}</style><a href="https://accounts.livechat.com/signup?client_id=8c7275c9fa6f4853e8442df1387f7fe6&redirect_uri=https%3A%2F%2Fapp.openwidget.com%2F&response_type=token&source_id=header_cta&source_type=website" class="css-1vhouco">Get started free</a></li></ul></div></div></div></header><style data-emotion="css 1dty9vd">.css-1dty9vd{position:relative;max-width:46rem;margin:0 auto;padding:0 20px;}.css-1dty9vd h2,.css-1dty9vd h3{scroll-margin-top:0px;}.css-1dty9vd h2 a,.css-1dty9vd h3 a{-webkit-text-decoration:none;text-decoration:none;}</style><article class="css-1dty9vd"><style data-emotion="css 1b5cffc">.css-1b5cffc{position:absolute;right:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;min-width:200px;display:none;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:flex-start;align-content:flex-start;padding:8px;overflow:visible;background-color:transparent;}@media (min-width: 1200px){.css-1b5cffc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><aside class="css-1b5cffc"><style data-emotion="css 16wsnw6">.css-16wsnw6{position:-webkit-sticky;position:sticky;top:16px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}</style><div class="css-16wsnw6"></div></aside><style data-emotion="css 194frs4">.css-194frs4{margin-top:50px;margin-bottom:20px;}.css-194frs4 h1{font-size:max(1.75rem, min(calc(1.75rem + (2.5 - 1.75) * ((100vw - 36rem) / (85 - 36))), 2.5rem));letter-spacing:-1.1px;line-height:1.15;font-weight:700;margin-top:20px;margin-bottom:20px;}</style><header class="css-194frs4"><h1>OpenWidget JavaScript API</h1></header><div><h2 id="introduction" class="reference"><a href="#introduction">Introduction</a></h2> <h3 id="what-is-js-api?" class="reference"><a href="#what-is-js-api?">What is JS API?</a></h3> OpenWidget JavaScript API lets you interact with the widget added to your website in ways that are not possible by default. For example, it is useful if you want to change the default OpenWidget launcher to a custom one on your mobile website and trigger the maximized view only when a customer clicks a specific button. Or if you'd like to create a custom button that will direct your customer straight to FAQ or one of our forms: Contact, Feedback or Bug Form. Our JS API documentation focuses on developers and requires a basic knowledge of JavaScript and HTML. However, when designing both our APIs and documentation, we wanted to ensure that you'll be able to easily create custom ways to interact with OpenWidget. Along the way, you can expect some ready-made examples to back up the raw technical descriptions. You will also get familiar with our <a href="/developers/js-api#html-attributes" title="OpenWidget's HTML Attributes">HTML Attributes</a> – a great way to create a simple widget integration without writing a single line of code. <h3 id="getting-started" class="reference"><a href="#getting-started">Getting started</a></h3> Once OpenWidget is installed on your website, our JS API can be accessed via the OpenWidget object, as it is being initialized within OpenWidget's tracking code. If you have not yet installed it on your website, you can get the code directly from the application. Here's how the OpenWidget's code looks like: <pre><style data-emotion="css 1j5hrwi">.css-1j5hrwi{position:relative;}</style><div class="css-1j5hrwi"><style data-emotion="css jxsc01">.css-jxsc01{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;background-color:transparent;font-size:inherit;font-family:inherit;color:inherit;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background-color 0.2s;transition:background-color 0.2s;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;right:0;top:0;position:absolute;margin:8px;border-radius:8px;text-align:left;width:auto;height:40px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px;background-color:#f0f0f0;cursor:pointer;color:#000;}</style><button aria-label="Copy" class="css-jxsc01"><style data-emotion="css v7uf56">.css-v7uf56{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:24px;height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:currentColor;stroke:none;}</style><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><style data-emotion="css yc2xz3">.css-yc2xz3{width:100%;height:100%;border-radius:8px;}</style><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"> <script> window.__ow = window.__ow || {}; window.__ow.organizationId = "yourOrganizationId"; ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[OpenWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.openwidget.com/openwidget.js",t.head.appendChild(n)}};!n.__ow.asyncInit&&e.init(),n.OpenWidget=n.OpenWidget||e}(window,document,[].slice)) </script> <noscript>You need to <a href="https://www.openwidget.com/enable-javascript" rel="noopener nofollow">enable JavaScript</a> to use the communication tool powered by <a href="https://www.openwidget.com/" rel="noopener nofollow" target="_blank">OpenWidget</a></noscript>  </code></div></div></pre> The OpenWidget object is equipped with the following functions: on – it registers a callback function for a specific event; call – it allows you to invoke methods available in our JS API. The pattern of using those functions looks like this: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.function(method, data) </code></div></div></pre> and here's a simple example of how it looks like in real life: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('maximize', { feature: 'faq' }) </code></div></div></pre> In this case, calling the maximize method with feature faq passed as an object will maximize your OpenWidget, with the FAQ view displayed upfront. <h3 id="developers-guides" class="reference"><a href="#developers-guides">Developers Guides</a></h3> Even with dedicated JS API documentation, seeing a live example can sometimes explain more than just looking at raw data. That's why we prepared Developers Guides that will tell you how to implement some of our features on your website or within your app. Available guides: <ul> <li><a href="/developers/guides/async-init" title="OpenWidget's AsyncInit Guide">Asynchronous Initialization Guide</a></li> <li><a href="/developers/guides/html-attributes" title="OpenWidget's HTML Attribute Guide">HTML Attributes Guide</a></li> </ul> <h2 id="methods" class="reference"><a href="#methods">Methods</a></h2> Our JS API allows you to interact with your OpenWidget with the use of the following methods: <ul> <li><a href="/developers/js-api#minimize" title="OpenWidget's JS API AsyncInit method">minimize</a></li> <li><a href="/developers/js-api#maximize" title="OpenWidget's JS API AsyncInit method">maximize</a></li> <li><a href="/developers/js-api#hide" title="OpenWidget's JS API AsyncInit method">hide</a></li> <li><a href="/developers/js-api#destroy" title="OpenWidget's JS API AsyncInit method">destroy</a></li> </ul> Below you will find a description of each method that is available for you to use. <h3 id="minimize" class="reference"><a href="#minimize">Minimize</a></h3> It minimizes the maximized view (OpenWidget’s Home Screen) of your OpenWidget. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('minimize') </code></div></div></pre> <h3 id="maximize" class="reference"><a href="#maximize">Maximize</a></h3> It maximizes the minimized view (OpenWidget’s launcher) of your OpenWidget. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('maximize') </code></div></div></pre> When maximizing the widget, you can also pass over the feature: "feature_name" as an object in the function's argument. It allows your customers to maximize the widget with a specific feature displayed in a dedicated view. For example, it may come in handy if you prepare a dedicated button that will ask your customers to reach out via the Contact Form. Here's the list of features that you can pass as a value for the feature argument: <ul> <li>chat</li> <li>faq</li> <li>form-contact</li> <li>form-feedback</li> <li>form-bugreport</li> </ul> Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('maximize', { feature: 'form-contact' }) </code></div></div></pre> You can enhance the 'chat' feature by including an optional messageDraft parameter. This parameter pre-fills the chat input field with a predefined message. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('maximize', { feature: 'chat', messageDraft: 'Hello, I need help!', }) </code></div></div></pre> The action will have no effect if the widget's current state prevents message entry or if the user already has a message draft. <h3 id="hide" class="reference"><a href="#hide">Hide</a></h3> It hides both minimized and maximized views of OpenWidget on your website. To bring it back later on, you will need to use either maximize or minimize API calls. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('hide') </code></div></div></pre> <h3 id="destroy" class="reference"><a href="#destroy">Destroy</a></h3> It destroys OpenWidget, meaning that it won't be available for your customers to interact with unless they refresh the page or the OpenWidget.init() function is called. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.call('destroy') </code></div></div></pre> <h2 id="callbacks" class="reference"><a href="#callbacks">Callbacks</a></h2> Callbacks allow you to react to specific events triggered by OpenWidget. With their help, you can introduce custom behaviors when OpenWidget triggers a specific event. For example, whenever OpenWidget is ready, you can decide to maximize it automatically. To do that, you need to subscribe to a callback using our JS API. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">function onReady() { // add actions that you'd like to perform when OpenWidget is ready // for example: OpenWidget.call('maximize') } OpenWidget.on('ready', onReady) </code></div></div></pre> Available callbacks: <ul> <li><a href="/developers/js-api#on-ready" title="OpenWidget's JS API On Ready callback">on ready</a></li> </ul> <h3 id="on-ready" class="reference"><a href="#on-ready">On ready</a></h3> On ready callback is called when the OpenWidget is loaded. If it was loaded already, the provided handler function would be called immediately. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.on('ready', onReady) </code></div></div></pre> <h2 id="async-initialization" class="reference"><a href="#async-initialization">Async Initialization</a></h2> <blockquote> 💡 If you want to learn more about Async Init, <a href="/developers/guides/async-init" title="OpenWidget's AsyncInit Guide">click here</a> to check out our official guide that will tell you how to implement it and what are the typical use cases when it may come in handy. </blockquote> <h3 id="what-is-asyncinit?" class="reference"><a href="#what-is-asyncinit?">What is AsyncInit?</a></h3> At OpenWidget, we also have the option to initialize your OpenWidget asynchronously – it allows you to decide exactly how and when the widget should be loaded on your website or within your app. A good example would be loading OpenWidget only when the customer accepts cookies. <h3 id="how-to-use-it?" class="reference"><a href="#how-to-use-it?">How to use it?</a></h3> As an optional feature, Asynchronous Initialization is disabled by default – whenever customers visit your website, OpenWidget loads automatically just after the snippet code is executed. To enable it, you need to explicitly add the __ow.asyncInit to your OpenWidget’s snippet and set its property to true. Here's a real-life example of how OpenWidget’s snippet with the asyncInit enabled looks like: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">window.__ow = window.__ow || {} window.__ow.organizationId = 'organizationId' window.__ow.asyncInit = true ;(function (n, t, c) { function i(n) { return e._h ? e._h.apply(null, n) : e._q.push(n) } var e = { _q: [], _h: null, _v: '2.0', on: function () { i(['on', c.call(arguments)]) }, once: function () { i(['once', c.call(arguments)]) }, off: function () { i(['off', c.call(arguments)]) }, get: function () { if (!e._h) throw new Error("[OpenWidget] You can't use getters before load.") return i(['get', c.call(arguments)]) }, call: function () { i(['call', c.call(arguments)]) }, init: function () { var n = t.createElement('script') ;(n.async = !0), (n.type = 'text/javascript'), (n.src = 'https://cdn.openwidget.com/openwidget.js'), t.head.appendChild(n) }, } !n.__ow.asyncInit && e.init(), (n.OpenWidget = n.OpenWidget || e) })(window, document, [].slice) </code></div></div></pre> From now on the snippet itself will be executed, but the OpenWidget and its resources will not be loaded. It means that although you will have access to the OpenWidget object, the widget itself will not be present on your website, and the ready callback will not be triggered. With AsyncInit enabled, you can trigger OpenWidget later on when the need arises. To do that, simply call the init function from the OpenWidget object, and your widget will become available: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-js" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">OpenWidget.init() </code></div></div></pre> Important: note that when the AsyncInit option is enabled and the OpenWidget is not initialized, features like our Visitor Counter or AI-based Product Recommendations will not be triggered and will be available only in maximized view! <h2 id="html-attributes" class="reference"><a href="#html-attributes">HTML Attributes</a></h2> <blockquote> 💡 To learn more about our Attributes and how to add a button with a custom interaction for your WordPress-based website, <a href="/developers/guides/html-attributes" title="OpenWidget's AsyncInit Guide">click here</a> to check out our official HTML Attributes guide. </blockquote> <h3 id="what-are-those?" class="reference"><a href="#what-are-those?">What are those?</a></h3> HTML Attributes are OpenWidget-related parameters that you can add to the elements of your website, like buttons. Just like the JS API methods described above, they allow you to interact with OpenWidget added to your service. It's a great way to create custom OpenWidget interactions without knowing even the basics of JavaScript. For example, suppose you have a dedicated Contact Page on your website/within your app. In that case, you can add a custom Send Us a Message button that, using our HTML Attributes, will maximize the widget with the Contact Form already opened. Here are some other use-case scenarios where using a custom button to open the widget can be beneficial: <ul> <li> Maximizing OpenWidget with a specific feature already opened: with the use of HTML Attributes, you can create custom buttons that will instantly maximize the OpenWidget with a feature of your choice opened in a dedicated view. It's a great way to redirect your customers straight to a Contact Form or give them the option to report a bug directly within your application. </li> <li> Replacing the default widget launcher with a custom one: if the minimized bubble (OpenWidget's launcher) covers the essential part of your mobile website, you can turn it off inside the OpenWidget application and then create a custom button that your customers can use to maximize the widget for themselves. It is especially useful within mobile apps, where every inch of a screen's working area matters. </li> </ul> <h3 id="attributes-structure" class="reference"><a href="#attributes-structure">Attributes Structure</a></h3> The structure of HTML Attributes is very simple. We have introduced two parameters: <ul> <li>data-openwidget-action</li> <li>data-openwidget-feature*</li> </ul> Once added to your custom buttons, they will trigger a specific action and open a specific feature in a dedicated view. *Important: note that the data-openwidget-feature parameter is optional and will work only with the data-openwidget-action set to maximize. Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-html" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><button type="button" data-openwidget-action="maximize" data-openwidget-feature="form-contact" > Click Me! </button> </code></div></div></pre> <h3 id="available-actions" class="reference"><a href="#available-actions">Available actions</a></h3> The data-openwidget-action parameter can be combined with the following actions: <ul> <li>minimize</li> <li>maximize</li> </ul> <h3 id="html-minimize" class="reference"><a href="#html-minimize">HTML Minimize</a></h3> It minimizes OpenWidget. Structure: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-html" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">data-openwidget-action="minimize" </code></div></div></pre> Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-html" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><button type="button" data-openwidget-action="minimize">Click Me!</button> </code></div></div></pre> <h3 id="html-maximize" class="reference"><a href="#html-maximize">HTML Maximize</a></h3> It maximizes OpenWidget. Structure: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-html" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">data-openwidget-action="maximize" </code></div></div></pre> Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-html" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><button type="button" data-openwidget-action="maximize">Click Me!</button> </code></div></div></pre> When using the maximize action, you can also combine it with the data-openwidget-feature parameter. It will allow you to maximize OpenWidget with a specific feature displayed in a dedicated view. Here's the list of features that you can combine with maximize action: <ul> <li>chat</li> <li>faq</li> <li>form-contact</li> <li>form-feedback</li> <li>form-bugreport</li> </ul> Example: <pre><div class="css-1j5hrwi"><button aria-label="Copy" class="css-jxsc01"><svg color="inherit" viewBox="0 0 24 24" aria-hidden="true" class="css-v7uf56"><path d="M20.625,3 L8.625,3 C8.00367966,3 7.5,3.50367966 7.5,4.125 L7.5,7.5 L4.125,7.5 C3.50367966,7.5 3,8.00367966 3,8.625 L3,20.625 C3,21.2463203 3.50367966,21.75 4.125,21.75 L16.125,21.75 C16.7463203,21.75 17.25,21.2463203 17.25,20.625 L17.25,17.25 L20.625,17.25 C21.2463203,17.25 21.75,16.7463203 21.75,16.125 L21.75,4.125 C21.75,3.50367966 21.2463203,3 20.625,3 L20.625,3 Z M15,19.5 L5.25,19.5 L5.25,9.75 L15,9.75 L15,19.5 Z M19.5,15 L17.25,15 L17.25,8.625 C17.25,8.00367966 16.7463203,7.5 16.125,7.5 L9.75,7.5 L9.75,5.25 L19.5,5.25 L19.5,15 Z"></path></svg></button><div class="css-yc2xz3" style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:14px;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:30px;margin:.5em 0;overflow:auto;background-color:#fff"><code class="language-html" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><button type="button" data-openwidget-action="maximize" data-openwidget-feature="form-contact" > Click Me! </button> </code></div></div></pre></div></article><style data-emotion="css 5whj2q">.css-5whj2q{max-width:1100px;margin:0 auto;scroll-margin-top:130px;margin-top:90px;margin-bottom:30px;}</style><div class="css-5whj2q"><style data-emotion="css s6qrfi">.css-s6qrfi{font-weight:normal;font-size:24px;text-align:center;}.css-s6qrfi a{-webkit-text-decoration:none;text-decoration:none;}</style><h2 class="css-s6qrfi">Discover <a href="https://text.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank">Text</a> products:</h2><style data-emotion="css r5yit7">.css-r5yit7{display:grid;font-size:16px;grid-template-columns:repeat(4, 1fr);-webkit-column-gap:32px;column-gap:32px;margin-top:50px;row-gap:32px;}@media (max-width: 1024px){.css-r5yit7{grid-template-columns:repeat(2, 1fr);padding:0 32px;}}@media (max-width: 574px){.css-r5yit7{grid-template-columns:1fr;}}</style><div class="css-r5yit7"><style data-emotion="css ktlxeq">.css-ktlxeq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:24px;column-gap:24px;-webkit-text-decoration:none;text-decoration:none;color:#1b1b20;}.css-ktlxeq:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="https://www.livechat.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" class="css-ktlxeq"><div><style data-emotion="css coayau">.css-coayau{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:72px;height:72px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:currentColor;stroke:none;}</style><svg color="inherit" viewBox="0 0 72 72" aria-hidden="true" class="css-coayau"><g filter="url(#filter0_dd)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"></rect></g><path d="M51.8 39a7.6 7.6 0 01-7.6 6.8H40L32 51v-5.2l8-5.2h4.2a2.3 2.3 0 002.4-2c.2-4 .2-8 0-12a2.2 2.2 0 00-2.2-2.1 138.7 138.7 0 00-16.9 0 2.2 2.2 0 00-2 2c-.4 4-.4 8-.2 12a2.4 2.4 0 002.5 2.1H32v5.2h-4.2a7.5 7.5 0 01-7.6-6.9c-.3-4.2-.3-8.5 0-12.8a7.4 7.4 0 017-6.8 124.8 124.8 0 0117.6 0 7.4 7.4 0 017 6.8c.2 4.3.2 8.6 0 12.8z" fill="#FF5100"></path><defs><filter id="filter0_dd" x="0" y="0" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="1"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset></feOffset><feGaussianBlur stdDeviation="1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"></feBlend></filter></defs></svg></div><div><style data-emotion="css v1uytm">.css-v1uytm{margin:0;font-weight:500;}</style>LiveChat<style data-emotion="css eh7lb7">.css-eh7lb7{margin:0;}</style>Connect with customers</div></a><a href="https://www.chatbot.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" class="css-ktlxeq"><div><svg color="inherit" viewBox="0 0 72 72" aria-hidden="true" class="css-coayau"><g filter="url(#filter0_dd1)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"></rect></g><path d="M43.6 31.6v3a1.1 1.1 0 01-.6 1.1c-2.2 1-4.6 1.6-7 1.7-2.4 0-4.8-.6-7-1.7a1.1 1.1 0 01-.6-1v-3.1a.9.9 0 011.2-.8c2 .9 4.2 1.3 6.4 1.4 2.2 0 4.3-.5 6.4-1.4a.9.9 0 011.2.8z" fill="#06F"></path><path d="M51.8 38.9a7.6 7.6 0 01-7.6 6.9H40L32 51v-5.2l8-5.2h4.2a2.4 2.4 0 002.4-2.1c.3-4 .2-8 0-12a2.2 2.2 0 00-2.1-2 138.9 138.9 0 00-17 0 2.2 2.2 0 00-2 2c-.4 4-.4 8-.1 12a2.4 2.4 0 002.4 2.1H32v5.2h-4.2a7.6 7.6 0 01-7.6-7 96 96 0 010-12.7 7.4 7.4 0 017-6.8 125 125 0 0117.6 0 7.4 7.4 0 017 6.8 96 96 0 010 12.8z" fill="#06F"></path><defs><filter id="filter0_dd1" x="0" y="0" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="1"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset></feOffset><feGaussianBlur stdDeviation="1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"></feBlend></filter></defs></svg></div><div>ChatBotAutomate customer service with AI</div></a><a href="https://www.helpdesk.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" class="css-ktlxeq"><div><svg color="inherit" viewBox="0 0 72 72" aria-hidden="true" class="css-coayau"><g filter="url(#filter0_dd2)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"></rect></g><path d="M36 33.3l8.1-7.1H36c-2.9 0-5.8.1-8.5.3a2.2 2.2 0 00-2 2c-.2 1.7-.3 3.8-.3 6v1c0 2.2 0 4.3.2 6a2.2 2.2 0 002.1 2c5.7.4 11.3.4 17 0a2.2 2.2 0 002-2c.2-1.6.3-3.6.3-5.6l5.2-4.5v4.5l-.2 6a7.4 7.4 0 01-7 6.8 118.6 118.6 0 01-17.7 0 7.4 7.4 0 01-6.9-6.8 83 83 0 01-.2-6.3v-1.2l.2-6.3a7.4 7.4 0 017-6.8C30 21.1 33 21 36 21h16v5.2L36 40.1l-7.5-6.5 4-3.4 3.5 3z" fill="#2FC774"></path><defs><filter id="filter0_dd2" x="0" y="0" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="1"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset></feOffset><feGaussianBlur stdDeviation="1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"></feBlend></filter></defs></svg></div><div>HelpDeskSupport customers with tickets</div></a><a href="https://www.knowledgebase.com/?utm_source=openwidget.com&utm_medium=referral&utm_campaign=productbarfooter" target="_blank" class="css-ktlxeq"><div><svg color="inherit" viewBox="0 0 72 72" aria-hidden="true" class="css-coayau"><g filter="url(#filter0_dd3)"><rect x="4" y="3" width="64" height="64" rx="10" fill="#fff"></rect></g><path d="M46.8 26.4V21h-.3c-4.4.2-8.1 3-10.4 5.4H36c-2.3-2.3-6-5.2-10.4-5.4h-.3v5.4H20v9.2l.2 6.3a7.4 7.4 0 007 6.8 125.1 125.1 0 0017.7 0 7.4 7.4 0 006.9-6.8l.2-6.3v-9.2h-5.2zm0 9.2c0 2 0 4.2-.2 5.9a2.2 2.2 0 01-2.1 2c-5.7.4-11.3.4-17 0a2.2 2.2 0 01-2-2 76 76 0 01-.3-6v-9.1c3.8.1 7.5 4.1 8.6 5.7l2.2 3 2.2-3c1.1-1.6 4.8-5.6 8.6-5.7v9.2z" fill="#9146FF"></path><defs><filter id="filter0_dd3" x="0" y="0" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="1"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset></feOffset><feGaussianBlur stdDeviation="1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></feColorMatrix><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"></feBlend></filter></defs></svg></div><div>KnowledgeBaseGuide and educate customers</div></a></div></div><style data-emotion="css 1q331lc">.css-1q331lc{max-width:1100px;margin:0 auto;scroll-margin-top:130px;font-size:.75rem;font-weight:normal;line-height:1.333;color:var(--color-black-400);margin-top:150px;padding:20px;padding-bottom:100px;}.css-1q331lc a{color:inherit;}@media (max-width: 370px){.css-1q331lc{margin-top:50px;padding:10px;padding-bottom:50px;}}</style><footer class="css-1q331lc">Copyright © 2024 Text, Inc. All rights reservedWe use cookies and similar technologies to enhance your interactions with our website and Services, including when you reach out to us on chat. This comprises traffic analysis, delivering personalized content, and supporting our marketing efforts. By accessing our website and interacting with our Services, you agree to let us and our partners employ cookies and related technologies on your computer or devices. Click the <a href="/legal/cookies-policy">Cookies Policy</a> to check how you can control the use of cookies through your device. To understand how we process your data, including through cookies and interactions with us, please read our <a href="/legal/privacy-policy">Privacy Policy</a>.<style data-emotion="css oz1o9w">.css-oz1o9w{display:grid;row-gap:15px;}</style><div class="css-oz1o9w"><style data-emotion="css 2ea0yq">.css-2ea0yq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:5px;}@media (max-width: 390px){.css-2ea0yq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:2px;}}</style><div class="css-2ea0yq">Widgets:<style data-emotion="css anblhv">.css-anblhv{list-style-type:none;padding:0;margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;}.css-anblhv a{color:inherit;display:inline-block;margin-right:10px;}@media (max-width: 370px){.css-anblhv{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-anblhv a{display:block;margin-right:0;margin-bottom:10px;}}</style><ul class="css-anblhv"><li><a href="/widgets/google-reviews">Google Reviews</a></li><li><a href="/widgets/whatsapp-chat-widget-for-website">WhatsApp Chat Widget</a></li><li><a href="/widgets/facebook-messenger-widget">Facebook Messenger Widget</a></li><li><a href="/widgets/chat-interface-for-open-ai-assistants">Chat Interface for OpenAI</a></li><li><a href="/widgets/custom-links-widget">Custom Links</a></li><li><a href="/widgets/bug-report-template">Bug Report Form</a></li><li><a href="/widgets/contact-form">Contact Form</a></li><li><a href="/widgets/feedback-form-template">Feedback Form</a></li><li><a href="/widgets/faq-template">FAQ Template</a></li><li><a href="/widgets/product-recommendations">Product Recommendations</a></li><li><a href="/widgets/product-cards">Product Cards</a></li><li><a href="/widgets/instagram-feed">Instagram Feed</a></li><li><a href="/widgets/visitor-counter">Visitor Counter</a></li><li><a href="/widgets/create-your-own">Create Your Own</a></li></ul></div><div class="css-2ea0yq">Developers:<ul class="css-anblhv"><li><a href="/developers/openwidget-apps">OpenWidget Apps</a></li><li><a href="/developers/js-api">JavaScript API</a></li><li><a href="/developers/guides/async-init">Asynchronous Initialization</a></li><li><a href="/developers/guides/html-attributes">HTML Attributes</a></li></ul></div><div class="css-2ea0yq">Resources:<ul class="css-anblhv"><li><a href="https://help.openwidget.com/" target="_blank" rel="noopener noreferrer">Help center</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/blog">Blog</a></li><li><a href="/ecommerce/ai">AI ecommerce personalization</a></li><li><a href="/integrations/google-reviews-for-wix">Google Reviews Widget for Wix</a></li><li><a href="/widgets/google-reviews/wordpress">Google Reviews Widget for WordPress</a></li><li><a href="/integrations/helpdesk">HelpDesk integration</a></li><li><a href="/widgets/instagram-feed/wordpress">Instagram Widget for WordPress</a></li><li><a href="/integrations/livechat">LiveChat integration</a></li><li><a href="/integrations/wordpress">WordPress integration</a></li><li><a href="/legal/terms-of-use">Terms of Use</a></li><li><a href="/legal/privacy-policy">Privacy Policy</a></li><li><a href="/legal/cookies-policy">Cookies Policy</a></li></ul></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"js-api","content":"\n## Introduction\n\n### What is JS API?\n\nOpenWidget JavaScript API lets you **interact with the widget added to your website in ways that are not possible by default.** For example, it is useful if you want to change the default OpenWidget launcher to a custom one on your mobile website and trigger the maximized view only when a customer clicks a specific button. Or if you'd like to create a custom button that will direct your customer straight to FAQ or one of our forms: Contact, Feedback or Bug Form.\n\nOur JS API documentation focuses on developers and requires a basic knowledge of JavaScript and HTML. However, when designing both our APIs and documentation, we wanted to ensure that you'll be able to easily create custom ways to interact with OpenWidget. Along the way, you can expect some ready-made examples to back up the raw technical descriptions.\n\nYou will also get familiar with our **[HTML Attributes](/developers/js-api#html-attributes \"OpenWidget's HTML Attributes\")** – a great way to create a simple widget integration **without writing a single line of code.**\n\n### Getting started\n\nOnce OpenWidget is installed on your website, our JS API can be accessed via the OpenWidget object, as it is being initialized within OpenWidget's tracking code. If you have not yet installed it on your website, you can get the code directly from the application. Here's how the OpenWidget's code looks like:\n\n```js\n\u003c!-- Start of OpenWidget (www.openwidget.com) code --\u003e\n\u003cscript\u003e\n window.__ow = window.__ow || {};\n window.__ow.organizationId = \"yourOrganizationId\";\n ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:\"2.0\",on:function(){i([\"on\",c.call(arguments)])},once:function(){i([\"once\",c.call(arguments)])},off:function(){i([\"off\",c.call(arguments)])},get:function(){if(!e._h)throw new Error(\"[OpenWidget] You can't use getters before load.\");return i([\"get\",c.call(arguments)])},call:function(){i([\"call\",c.call(arguments)])},init:function(){var n=t.createElement(\"script\");n.async=!0,n.type=\"text/javascript\",n.src=\"https://cdn.openwidget.com/openwidget.js\",t.head.appendChild(n)}};!n.__ow.asyncInit\u0026\u0026e.init(),n.OpenWidget=n.OpenWidget||e}(window,document,[].slice))\n\u003c/script\u003e\n\u003cnoscript\u003eYou need to \u003ca href=\"https://www.openwidget.com/enable-javascript\" rel=\"noopener nofollow\"\u003eenable JavaScript\u003c/a\u003e to use the communication tool powered by \u003ca href=\"https://www.openwidget.com/\" rel=\"noopener nofollow\" target=\"_blank\"\u003eOpenWidget\u003c/a\u003e\u003c/noscript\u003e\n\u003c!-- End of OpenWidget code --\u003e\n```\n\nThe OpenWidget object is equipped with the following functions:\non – it registers a callback function for a specific event;\ncall – it allows you to invoke methods available in our JS API.\n\nThe pattern of using those functions looks like this:\n\n```js\nOpenWidget.function(method, data)\n```\n\nand here's a simple example of how it looks like in real life:\n\n```js\nOpenWidget.call('maximize', { feature: 'faq' })\n```\n\nIn this case, calling the maximize method with feature **faq** passed as an object will maximize your OpenWidget, with the FAQ view displayed upfront.\n\n### Developers Guides\n\nEven with dedicated JS API documentation, seeing a live example can sometimes explain more than just looking at raw data. That's why we prepared **Developers Guides** that will tell you how to implement some of our features on your website or within your app.\n\n**Available guides:**\n\n- **[Asynchronous Initialization Guide](/developers/guides/async-init \"OpenWidget's AsyncInit Guide\")**\n- **[HTML Attributes Guide](/developers/guides/html-attributes \"OpenWidget's HTML Attribute Guide\")**\n\n## Methods\n\nOur JS API allows you to interact with your OpenWidget with the use of the following methods:\n\n- **[minimize](/developers/js-api#minimize \"OpenWidget's JS API AsyncInit method\")**\n- **[maximize](/developers/js-api#maximize \"OpenWidget's JS API AsyncInit method\")**\n- **[hide](/developers/js-api#hide \"OpenWidget's JS API AsyncInit method\")**\n- **[destroy](/developers/js-api#destroy \"OpenWidget's JS API AsyncInit method\")**\n\nBelow you will find a description of each method that is available for you to use.\n\n### Minimize\n\nIt minimizes the maximized view (OpenWidget’s Home Screen) of your OpenWidget.\n\n**Example:**\n\n```js\nOpenWidget.call('minimize')\n```\n\n### Maximize\n\nIt maximizes the minimized view (OpenWidget’s launcher) of your OpenWidget.\n\n**Example:**\n\n```js\nOpenWidget.call('maximize')\n```\n\nWhen maximizing the widget, you can also pass over the feature: \"feature_name\" as an object in the function's argument. It allows your customers to maximize the widget with a specific feature displayed in a dedicated view. For example, it may come in handy if you prepare a dedicated button that will ask your customers to reach out via the Contact Form. Here's the list of features that you can pass as a value for the feature argument:\n\n- **chat**\n- **faq**\n- **form-contact**\n- **form-feedback**\n- **form-bugreport**\n\n**Example:**\n\n```js\nOpenWidget.call('maximize', { feature: 'form-contact' })\n```\n\nYou can enhance the 'chat' feature by including an optional **messageDraft** parameter. This parameter pre-fills the chat input field with a predefined message.\n\n**Example:**\n\n```js\nOpenWidget.call('maximize', {\n feature: 'chat',\n messageDraft: 'Hello, I need help!',\n})\n```\n\nThe action will have no effect if the widget's current state prevents message entry or if the user already has a message draft.\n\n### Hide\n\nIt hides both minimized and maximized views of OpenWidget on your website. To bring it back later on, you will need to use either **maximize** or **minimize** API calls.\n\n**Example:**\n\n```js\nOpenWidget.call('hide')\n```\n\n### Destroy\n\nIt destroys OpenWidget, meaning that it won't be available for your customers to interact with unless they refresh the page or the **OpenWidget.init()** function is called.\n\n**Example:**\n\n```js\nOpenWidget.call('destroy')\n```\n\n## Callbacks\n\nCallbacks allow you to react to specific events triggered by OpenWidget. With their help, you can introduce custom behaviors when OpenWidget triggers a specific event. For example, whenever OpenWidget is ready, you can decide to maximize it automatically. To do that, you need to subscribe to a callback using our JS API.\n\n**Example:**\n\n```js\nfunction onReady() {\n // add actions that you'd like to perform when OpenWidget is ready\n // for example:\n OpenWidget.call('maximize')\n}\n\nOpenWidget.on('ready', onReady)\n```\n\nAvailable callbacks:\n\n- **[on ready](/developers/js-api#on-ready \"OpenWidget's JS API On Ready callback\")**\n\n### On ready\n\nOn ready callback is called when the OpenWidget is loaded. If it was loaded already, the provided handler function would be called immediately.\n\n**Example:**\n\n```js\nOpenWidget.on('ready', onReady)\n```\n\n## Async Initialization\n\n\u003e 💡 If you want to learn more about Async Init, **[click here](/developers/guides/async-init \"OpenWidget's AsyncInit Guide\")** to check out our official guide that will tell you how to implement it and what are the typical use cases when it may come in handy.\n\n### What is AsyncInit?\n\nAt OpenWidget, we also have the option to initialize your OpenWidget asynchronously – it allows you to decide exactly how and when the widget should be loaded on your website or within your app. A good example would be loading OpenWidget only when the customer accepts cookies.\n\n### How to use it?\n\nAs an optional feature, Asynchronous Initialization is disabled by default – whenever customers visit your website, OpenWidget loads automatically just after the snippet code is executed. To enable it, you need to explicitly add the **\\_\\_ow.asyncInit** to your OpenWidget’s snippet and set its property to true. Here's a real-life example of how OpenWidget’s snippet with the asyncInit enabled looks like:\n\n```js\nwindow.__ow = window.__ow || {}\nwindow.__ow.organizationId = 'organizationId'\nwindow.__ow.asyncInit = true\n;(function (n, t, c) {\n function i(n) {\n return e._h ? e._h.apply(null, n) : e._q.push(n)\n }\n var e = {\n _q: [],\n _h: null,\n _v: '2.0',\n on: function () {\n i(['on', c.call(arguments)])\n },\n once: function () {\n i(['once', c.call(arguments)])\n },\n off: function () {\n i(['off', c.call(arguments)])\n },\n get: function () {\n if (!e._h)\n throw new Error(\"[OpenWidget] You can't use getters before load.\")\n return i(['get', c.call(arguments)])\n },\n call: function () {\n i(['call', c.call(arguments)])\n },\n init: function () {\n var n = t.createElement('script')\n ;(n.async = !0),\n (n.type = 'text/javascript'),\n (n.src = 'https://cdn.openwidget.com/openwidget.js'),\n t.head.appendChild(n)\n },\n }\n !n.__ow.asyncInit \u0026\u0026 e.init(), (n.OpenWidget = n.OpenWidget || e)\n})(window, document, [].slice)\n```\n\nFrom now on the snippet itself will be executed, but the OpenWidget and its resources will not be loaded. It means that although you will have access to the OpenWidget object, the widget itself will not be present on your website, and the ready callback will not be triggered.\nWith AsyncInit enabled, you can trigger OpenWidget later on when the need arises. To do that, simply call the init function from the OpenWidget object, and your widget will become available:\n\n```js\nOpenWidget.init()\n```\n\n**Important:** note that when the AsyncInit option is enabled and the OpenWidget is not initialized, features like our Visitor Counter or AI-based Product Recommendations **will not be triggered** and will be available only in maximized view!\n\n## HTML Attributes\n\n\u003e 💡 To learn more about our Attributes and how to add a button with a custom interaction for your WordPress-based website, **[click here](/developers/guides/html-attributes \"OpenWidget's AsyncInit Guide\")** to check out our official HTML Attributes guide.\n\n### What are those?\n\nHTML Attributes are OpenWidget-related parameters that you can add to the elements of your website, like buttons. Just like the JS API methods described above, they allow you to interact with OpenWidget added to your service. It's a great way to create custom OpenWidget interactions without knowing even the basics of JavaScript.\n\nFor example, suppose you have a dedicated Contact Page on your website/within your app. In that case, you can add a custom **Send Us a Message** button that, using our HTML Attributes, will **maximize the widget with the Contact Form already opened.**\n\nHere are some other use-case scenarios where using a custom button to open the widget can be beneficial:\n\n- **Maximizing OpenWidget with a specific feature already opened:** with the use of HTML Attributes, you can create custom buttons that will instantly maximize the OpenWidget with a feature of your choice opened in a dedicated view. It's a great way to redirect your customers straight to a Contact Form or give them the option to report a bug directly within your application.\n\n- **Replacing the default widget launcher with a custom one:** if the minimized bubble (OpenWidget's launcher) covers the essential part of your mobile website, you can turn it off inside the OpenWidget application and then create a custom button that your customers can use to maximize the widget for themselves. It is especially useful within mobile apps, where every inch of a screen's working area matters.\n\n### Attributes Structure\n\nThe structure of HTML Attributes is very simple. We have introduced two parameters:\n\n- **data-openwidget-action**\n- **data-openwidget-feature\\***\n\nOnce added to your custom buttons, they will trigger a specific action and open a specific feature in a dedicated view.\n\n**\\*Important:** note that the **data-openwidget-feature** parameter is optional and will work only with the **data-openwidget-action** set to maximize.\n\n**Example:**\n\n```html\n\u003cbutton\n type=\"button\"\n data-openwidget-action=\"maximize\"\n data-openwidget-feature=\"form-contact\"\n\u003e\n Click Me!\n\u003c/button\u003e\n```\n\n### Available actions\n\nThe data-openwidget-action parameter can be combined with the following actions:\n\n- **minimize**\n- **maximize**\n\n### HTML Minimize\n\nIt minimizes OpenWidget.\n\n**Structure:**\n\n```html\ndata-openwidget-action=\"minimize\"\n```\n\n**Example:**\n\n```html\n\u003cbutton type=\"button\" data-openwidget-action=\"minimize\"\u003eClick Me!\u003c/button\u003e\n```\n\n### HTML Maximize\n\nIt maximizes OpenWidget.\n\n**Structure:**\n\n```html\ndata-openwidget-action=\"maximize\"\n```\n\n**Example:**\n\n```html\n\u003cbutton type=\"button\" data-openwidget-action=\"maximize\"\u003eClick Me!\u003c/button\u003e\n```\n\nWhen using the maximize action, you can also combine it with the data-openwidget-feature parameter. It will allow you to maximize OpenWidget with a specific feature displayed in a dedicated view. Here's the list of features that you can combine with maximize action:\n\n- **chat**\n- **faq**\n- **form-contact**\n- **form-feedback**\n- **form-bugreport**\n\n**Example:**\n\n```html\n\u003cbutton\n type=\"button\"\n data-openwidget-action=\"maximize\"\n data-openwidget-feature=\"form-contact\"\n\u003e\n Click Me!\n\u003c/button\u003e\n```\n","title":"OpenWidget JavaScript API"},"__N_SSG":true},"page":"/developers/[...slug]","query":{"slug":["js-api"]},"buildId":"yG92065Oc6-VoUHLeAEfR","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>