How to demo a web widget on a third party site without having access to their code

<![CDATA[The inspiration for this blog post came from a question on StackOverflow titled "Overlay one iframe on top of another, scroll them together“. The question was very specific and, to the best of my knowledge, impossible to achieve directly.

However, the requirement underpinning the question was interesting: How could you demonstrate a web widget on a third party site without altering their source code?

The default solution might be to scrape their page to recreate a copy of their page on your server, which you could then mangle any way you like. But that solution would only work for one page (or a manually created sub-set) and wouldn’t be able to incorporate any of the dynamic content/logic present on the third party site.

I thought there must be a better way. So, I came up with this bookmarklet idea.

Try it out for yourself:

  1. Drag this bookmarklet to your bookmarks bar: Run Demo
  2. Open a new tab and visit any site of your choice
  3. Click the Run Demo bookmarklet in your bookmarks bar
  4. If you have popup windows disabled, click to enable popups for that site (then, if necessary, click the Run Demo bookmarklet again)
  5. You should see a random LoremPixel image overlaid at the top right of the page on the target site
  6. As you navigate the target site you should see a new image overlaid on every page on that site – it’ll stay there until you close the popup window or navigate to a different domain

My demo is a pretty trivial example – a single image, absolute positioned – but it would be easy to modify the example to traverse the DOM on the target site and inject any HTML/CSS/JS into any node within the page, making it appear ‘native’ and run site-wide.

To understand how it works, and how you could modify it for your own requirements, see my answer here on StackOverflow.

As a web team leader I’m often asked to test and evaluate Company X’s latest widget. Almost always, these widgets require either us or them to do a significant amount of work, and the results are limited. I reckon this solution could have pretty wide-ranging applications.

Thoughts and comments are welcomed…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.