1
4 Comments

How is a embeddable JavaScript widget like subscription form or Google analytics created?

I have a basic pop up form made using Html,css and JS for learning purposes that just says "Hello".How do i convert this form to a <script></script> code like Google analytics code has?I want to add the form to my other website and make it distributable freely.How do i accomplish this?I don't even know what to Google exactly.

Thanks!

  1. 3

    I actually just finished creating an embedded widget for a Ruby on Rails application! I'm not sure what level you're at with coding, but it can be a fairly complicated process.

    You basically create a JavaScript file on your server, call it on the client site with the script tag, pass variables in script tag if needed, and then inject code onto the client's website by creating HTML elements in the client DOM. Since the JS file is on your server, you can look up anything from your database using the variables passed in (e.g. user ID).

    At some point, depending on your framework of choice, you will probably get a cross origin error (especially when testing locally), which means that you need to permit other websites to call your JS file directly. And, you also need to lock down any malicious behavior that may occur within the widget since you have a lot less control than if it were on your website.

    1. 1

      I'm working with RoR myself...did you follow any good tutorials for this?

      1. 2

        Here are the two articles that I read about it:

        http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/

        http://www.coshx.com.s3-website-us-east-1.amazonaws.com/blog/2015/02/19/developing-an-embeddable-javascript-widget-snippet-for-client-sites/

        I started a lot simpler than these though and then built up rather than trying to build something as complex as they did right away.

        1. 2

          Awesome - thanks for the resources!