Innovator, author, and owner of an e-shop that he has been continuously developing for over 10 years. Written on ApTechleader of createIT, working in the IT sector for over 14 years. Make sure to follow us for other useful tips and guidelines, and don’t forget to sign up for our newsletter. Var s = document.getElementsByTagName('script') s.parentNode.insertBefore(mychat, s) Var mychat = document.createElement('script') mychat.type = 'text/javascript' mychat.async = true So, if there are any updates to the code, we can add changes directly to the widget.js file (the embed code on target page doesn’t need to be updated ). It’s worth to mention that /embed/widget.js includes our widget logic, and the file is hosted on our server. It’s quite a common solution for every embeddable element across the internet. Similar code is used by Google Analytics to add tracking scripts. In addition, the Client can customize iframe size by changing the iframeWidth and iframeHeight variables. The final code that needs to be pasted into the HEAD section of the target page is simple javascript that appends an /embed/widget.js file from our domain. For example, we will be able to render in our iframe: // /embed/widget.js The only requirement is that the target website can’t have ‘X-Frame-Options’ set to ‘sameorigin’ nor ‘deny’. The iframe source can be anything: chat, application, form, or some other website. Iframe1.allow = "autoplay camera microphone" ĭocument.querySelector('body').appendChild(iframe2) Var iframe1 = document.createElement('iframe') Var iframe2 = document.createElement('div') Parent div gets width and height from the global window variable window.mychat. Inline styles add a fixed position and remove default browser styles. This file creates an iframe tag with src and appends it into the DOM of the parent page. You can host: widget.js and iframe source on different domains. embed code for loading /embed/widget.js (added in the HEAD section of target website)./embed/widget.js – for appending iframe to DOM.Our goal will be to embed it as iframe on any website. The chat uses an external url and is fully functional. We will use SendBird demos for presentation, this chat in particular: –primary&viewMode=story. Using the javascript embed, we can easily add custom logic to the loading mechanism, add lazy-loading or change the iframe source url. However, pasting iframe is often forbidden for security reasons, or CMS makes it possible to paste only some code into the HEAD of the page. How embed code should look like? The first approach will be to just paste the raw HTML code of iframe. This resolves typical problems like: javascript conflicts or global style overwrites. Iframe provides a separation between styles and code of both websites. It is often a good solution to use iframe when creating different applications that will be embedded on third-party websites.
0 Comments
Leave a Reply. |