How are embed codes implemented?

twitter logo github logo ・1 min read

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.

twitter logo DISCUSS (1)
markdown guide
 

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.

Classic DEV Post from Jul 20

What Makes You a Great Programmer on The Team?

Majority of software developers are aspired to be not only a competent professional but also a great one.

Muhammad Asif profile image

πŸ‘‹ Hey dev.to reader.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❀️