embed website with js

First of all, this article is not for those who are looking for a full-fledged solution for their application to be embeddable on other websites. This is a quick and lazy solution for people running:

  1. WordPress Blogs
  2. Ecommerce Sites
  3. Sell Event Tickets
  4. Online Selling of Digital Products
  5. Sell Online Services

Use case: If you run a marketplace where people register and sell products or services. They want to include their product or services page on there own web portal and need a simple JavaScript one-line code to include on their website. Which replicate your marketplace product page on their portal. This will help them sell their products and services directly from there portal using your platform.

As you can see above in the diagram I would like to achieve this result with minimum efforts. Bill Gates once said that he would always “hire a lazy person to do a difficult job” at Microsoft. Why? “Because a lazy person will find an easy way to do it.” Here are some of the ways you can use your laziness to your advantage and turn procrastination into an asset.

So being myself a lazy person I have found the best possible solution available online. It uses iframes but hay your user just have to copy paste a piece of JavaScript into there webpage in order to embed your widget.

You might already know that JavaScript is the best way to achieve this result. And if you do a bit of googling you will get to know that JavaScript developers are the most expensive once to hire. So, what is that you could do in order to achieve this with minimal programming.

You could use an already created JavaScript library which I am sure you are already using in your project for other features.

Solution:

The simplest solution for this problem would be to implement a js framework into your embeddable webpage.

Step 1# on your webpage which you want to allow users to embed please put below code.

<script type=”text/javascript” src=”https://pym.nprapps.org/pym.v1.min.js”></script>

<script>

var pymChild = new pym.Child();

</script>

Step 2# now as your users to put this code on their webpage

<div id=”example”></div>

<script type=”text/javascript” src=”https://pym.nprapps.org/pym.v1.min.js”></script>

<script>

    var pymParent = new pym.Parent(‘example’, ‘yourdomain.com/your_embed_webpage’, {});

</script>

What this will do is embed your marketplace webpage into users website via iframe. Now you can say that you could have achieved it with iframes.

Yes, you could. But there are several other problems to manage for example updating height of iframe when the content changes inside it. That takes a lot of time to program manually and hence this solution is the fastest one available.