How do JavaScript-based modal / popup services like KissInsights and Hello Bar work?

Question

I am developing a trendy / pop-up system for my users to embed them on their sites according to what KissInsights and Hello Bar (example here and here ).

What is the best practice for such services? . It seems that users are embedding a bit of JS, but this code inserts an extra script tag.

I am wondering how he communicates with the web service to get user-generated content, etc.

TIA

Answer 1

You are right that this is usually just a script that the client embeds on their site. However, that after that is a bit more complicated.

1. Insert a script

The first step, as said, is the script on the landing page.

This is essentially a script - it's just a piece of JavaScript code. This is very similar to what you would have on your own page.

This script should generate the content on the client page that you want to display.

However, there are some things to consider:

• You cannot use any libraries (or, if you want, be very careful what you use): they can conflict with what is already on the page and break the client’s site. You do not want to do this.
• Never redefine anything, as redefinition can violate the client site: this includes event listeners, properties of own objects, whatever. For example, always use addEventListener or addEvent with events because it allows you to have multiple listeners
• You cannot trust any styles: all the styles of the HTML elements that you create must be inlined because there can be a custom CSS style for the client website for them.
• You cannot add your own CSS rules: they can break the client site again.

These rules apply to any script or content that you run directly on the client’s site. If you create an iframe and show your content there, you can ignore these rules in any content inside the frame.

2. The script process on your server

An embeddable script should usually be a script created on your server. This allows you to enable logic, for example, selecting a display based on parameters or data from the application database.

It can be written in any language you like.

Usually your script URL should contain some sort of identifier so that you know what to display. For example, you can use an identifier to indicate which client site it is or something else.

If your application requires a login, you can process it in the same way as in normal mode. The fact that the server side of the script is being called by another site does not matter.

Communication between the embedded script and your server or frames

There are a few tricks in this.

As you know, XMLHttpRequest does not work in different domains, so you cannot use it.

The easiest way to send data from another site is to use an iframe and send the form to the user inside the iframe (or run XMLHttpRequest inside the frame, as the iframe content is on your own server, therefore it is not a cross-domain connection)

If your inline script displays content in the iframe dialog box, you may need to specify a script that is embedded in the client site when you need to close the iframe. This can be achieved, for example, using window.postMessage

For postMessage see http://ejohn.org/blog/cross-window-messaging/

For cross-domain communication see http://softwareas.com/cross-domain-communication-with-iframes

Answer 2

You can look here - this is an example of an API created using JsApiToolkit , which allows service providers to easily create and distribute Facebook-like tools on third-party sites.

The library is built on top of easyXDM for cross-domain messaging and facilitates interaction through modal dialogs or through pop-ups.

The code and readme should be sufficient to explain how things fit together (it really is not too complicated once you abstract things like XDM).

About embedding itself; you can do it directly, but most services use a “download” script that can be easily updated to point to real files — this small file could be served using a cache pragma, which would ensure that it doesn't cache for too long, while attached files can be used as long files.

Thus, you bear the overhead of reloading the bootloader instead of the entire set of scripts.

Answer 3

The best practice is to keep as little code as possible in the code snippet, so you never have to ask users to update their code. For example:

 <script type="text/javascript" src="http://your.site.com/somecode.js"></script> 

Works great if the author embeds it in his page. Otherwise, if you need a bookmarklet, you can use this code to download the script to any page:

  javascript:(function(){ var e=document.createElement('script'); e.setAttribute('language','javascript'); e.setAttribute('src','http://your.site.com/somecode.js'); document.head.appendChild(e); })(); 

Now all your code will work in the URI above, and whenever their page loads, a new copy of your code will be loaded and executed. (not considering caching settings)

From this script, just make sure you are not clobbling namespaces, and check if the library exists before loading another. Use a safe jQuery object instead of $ if you use it. And if you want to load more external content (like jQuery, UI, etc.), use the onload handler to detect when they are fully loaded. For example:

 function jsLoad(loc, callback){ var e=document.createElement('script'); e.setAttribute('language','javascript'); e.setAttribute('src',loc); if (callback) e.onload = callback; document.head.appendChild(e); } 

Then you can simply call this function to load any js file and execute the callback function.

 jsLoad('http://link.to/some.js', function(){ // do some stuff }); 

Now a tricky way to contact your domain to retrieve data is to use javascript as a transport. For example:

 jsLoad('http://link.to/someother.js?data=xy&callback=getSome', function(){ var yourData = getSome(); }); 

Your server will have to dynamically process this route and return some javascript that has a getSome function that does what you want. For example:

 function getSome(){ return {'some':'data','more':'data'}; } 

This will allow you to effectively communicate with your server and process data from anywhere where your server can get.

Answer 4

You can use dynamically generated (e.g. PHP or Ruby on Rails) to create this file for each request) JS file from your server, which is imported from the clients website as follows:

 <script type="text/javascript" src="//www.yourserver.com/dynamic.js"></script> 

Then you need to provide a way for your client to decide what they want the modal / pop-ups to contain (e.g. text, graphics, links, etc.). Either you create a simple CMS, or do it manually for each client.

Your server can see where each request for the JS file comes from and provide other JS code based on it. JS code can, for example, embed HTML code on your customers website, which creates a bar at the top with text and a link.

If you want to access information about visitors to your customers, you probably need to either read it from the HTML code, make your customers the information you want in a certain way, or figure out another way to access it from each client web server,