DEV Community

Muhammad Asif
Muhammad Asif

Posted on

How are embed codes implemented?

There are many service providers like Google Analytics, ZenDesk and several others, who give a unique embed code to paste at the bottom of web page(s) and their services integrate with the system. Especially I would like to know about services like Zendesk, which provide live chat support integration, how are those implemented? How those widgets show up on any website with just a snippet of code, and use custom CSS to make the widget look native?
Please try to explain briefly.

Top comments (1)

ben profile image
Ben Halpern

Typically it's a small amount of JavaScript which will call an external API which will load more content and scripts. In the case of Google Analytics, it's pretty lightweight because it's just sending out some signals about your activity. ZenDesk has a heavier load on the page because it imports all the divs and styling etc. to render the widget.

Other embeds might be done via iFrame, depending on the technical needs. An iFrame is an element designed to load another page's content within it. There are some upsides and downsides to this.

Some of these scripts might also use a "pixel" as a fallback for tracking, which is simply a 1x1 <img/> tag (hence the name pixel) that loads on the screen. And since it was loaded on the screen from its host server, the sever can track that this happened. So even if JavaScript is turned off or not permitted in the environment (like email), the tracking can still happen.

These are all examples of programmers hacking stuff together based on the best tools available on the web.