- Less work for client: When you sell, you can say: “Just paste this one line of code in your codebase and you’ll see what we’re all about!” So now, when they say, “we’ll do it when we get time,” you can tell them that putting off something like that is downright lazy! All you asked was for them to PASTE something! :P [Don’t tell your customers that, but do make their lives as easy as possible.]
- Client sees value quickly: Works great for Google Analytics! One line of code and clients start getting page view information left and right. Seeing that small amount of page view information makes clients excited about all the possibilities of Google Analytics [sub your products’ name here]!
- Easy Demo-ing: Are your clients wondering how your widget will look on their site? Just tell them to paste the snippet in their staging environment and see it in action! This makes demo-ing your product much easier!
- Your code is less reliant on client: Clients are smart people (after all, they’re using your product), but ideally your code doesn’t rely on their implementation of it. Embedded scripts that import a safe JS file from your server into client’s site allows you to change your code over time and improve it.
I’m sold! How do I make one?
Embedder / Loader Script:
You have to keep the following things in mind while creating an embedder script. All of these are very important:
- Asynchronous: You don’t want to slow down your client’s website in any way (otherwise they’ll hate your product!). There are several things we can do to make sure that our embedder script runs asynchronously and does not block any of our clients other code.
- Keep it short!: Don’t give your clients 100 lines of code to add to their website, that will be annoying to them! Aim for 15 lines or less.
- Cross-browser: You’ll need to make sure that your widget works on the browsers of your clients’ clients! So make your code compatible across IE, Firefox, Chrome, & more (depending on who your clients’ clients are!)
If you’re making anything appear on your client’s site or changing the appearance of their site, you might want to embed stylesheets into their website. Typically, the Payload script embeds stylesheets into the host site…something like “hey server, give me that stylesheet I made for this widget, okay got it, now let me embed it into the head tag of this host site, making these styles available to my widget.” We’ll point out how this is done in the Payload Script section. This process is, of course, slower than using inline styles only. So if you have little styling that’s necessary, you can avoid creating a separate stylesheet and save time.
Controllers / Routes on your Server:
These controllers and routes will handle requests. For example, you need to make your Payload script accessible to someone just by visiting a URL on your website. You might also want to grab something from your application’s database (i.e. settings for how the widget should look for a particular client) or save some analytics data to your database that the payload script periodically sends. But, how do you make a payload script accessible to the embedder script? How do you tell your server to listen to requests from a different origin (your client’s website)?
To make your controllers be able to process data (i.e. save analytics information on your widget or to get your customers’ specific settings for their widget) you’ll need to enable CORS or Cross Origin Resource Sharing. Learn more information on enabling this here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
For POST requests tracking data for our widget, we added the below lines of code into our ruby controller.
class WidgetClickEventcontroller < ApplicationController protect_from_forgery except: [:action] def action headers['Access-Control-Allow-Origin'] = '*' # Your code end end
For GET requests getting the settings of our widget, we used the below code in our ruby controller: