Creating an Embeddable Javascript Widget

One of the updates I’m working on for WhichBeach is the ability for other website owners to embed WhichBeach widgets that will display up-to-date beach data. This is very much a work in progress, but I’d like to share.

I’ve never done anything like this before, so I thought I’d start by taking some inspiration from Facebook’s Like Button implementation:

To break it down, Facebook’s script injects a new script tag that pulls in their Javascript SDK. They’re also ensuring that the script is only injected once into the page.

I think I can make this work for me too:

Great. Now all that’s left is to write a Javascript SDK! I’ll need to expose that on /js/sdk.js and add all my widget logic in there.

In due time… if anyone has any tips and resources that they think I should be using – let me know in the comments!

Share: Share on FacebookTweet about this on TwitterShare on LinkedIn
  • kj

    Hello, when you say “All that’s left is to write a JS SDK!”, how to know what to write there? Do you have any follow up on the topic? 🙂

  • CokoBWare

    Dude… this article is like telling me you’re gonna build a house, showing me a picture of the house, and then saying “Hey you only have to build it now!”. You need to improve this article immensely. I feel robbed of my time. *grumble*

    • . “Tomas Crofty”

      I totally agree, literally no explanation to what is going on

    • Mel Macaluso

      This 😂

  • Pavlo Kochubei

    Thanks for the article. It’s great, but I’m curious how did you end up setting up the development of sdk.js?

    Do you have a Webpack build or something similar?

    Thanks for discussing this.