New to WIP?

We're a group of makers shipping together. We help each other stay accountable and reach our goals.

Apply for access
Topics
👨‍💻 Developers
Other questions
What steps are included in your CI pipeline you should have added sooner? 11 answers
AI to work with a lot of data (two usecases) 8 answers
Customer Support SaaS with unlimited brands support 2 answers
Does investing time and effort in social media marketing still make sense? 9 answers
Back
 Question
Asked

How do you build products that can be embedded in customers' websites?

Examples like: intercom, embedded calculators, etc.

Austin Grandt
@doomxpatrol

👋 Join WIP to participate

Pug Pugson
@pugson

iframes duuuude

 Reply

I know people do it with iframes, but like....how do I check that it's a paying customer (referral url?) and make sure that I can't get hacked, it's my real customer, etc. I'm just a n00b when it comes to this specific type of development

 Reply

Ohh i made this on contactbox
Basically, iframes duuudes.
- The snippet I provide has two thing 1. it create a script that is called from my server. 2. it runs a function in the js on load with an ID parameter identifying the customer:

<script>
(function(b, o, x){var js, fjs = b.getElementsByTagName(o)[0];
if (b.getElementById(x)){return;}
js = b.createElement(o); js.id = x;
js.onload = function(){box("HJId52J7m")}
js.src = "https://contactbox.co/js/loader.js"
fjs.parentNode.insertBefore(js, fjs)
}(document, "script", "feedbackLoader"))
</script>

so the function box() called on load create the iframe for my widget. and use this iframe to send the customer ID (via postMessage.
On my website, i get the customer ID, verify it (using also the referrer url), get all customer info needed, and build the widget that is shown in the iframe.

Also since my widget size change, i have some event pushed thought the iframe to resize it.

roughly, its the idea, lmk if you want to take a look at the code

 Reply
John Omar
@user1251

I worked on a side project for a while where I embedded a group chat app within another website. This book had all the info I needed to get the project done: www.manning.com/books/third-p…

One of the authors is an engineer at Disqus which is a great example of a product embedded into a customers' website.

 Reply

wow this is awesome, thanks for the resource. I will definitely be checking it out.

 Reply

I built one of these - a sort of widget that inherited page styles. I would highly recommend not using an iframe and using a javascript application mounted into a given div container.

Why?

The advantages are great. Firstly, you have the ability to use the page styles if you so choose. You can namespace the css you want to remain no matter what and leave things like fonts, text colours, a tag colours, etc to inherit from the page. Then the widget/calculator/chatbox looks way more like it's part of the actual page by adapting to the styles of the page which is the intention.

I used SVG graphics for icons and other simple images because it's possible to also change their colours dynamically, letting me easily adapt to a dark page and a light page with no issues.

Being embedded on the page also allows your embeddor "host site" to interact with your embed a bit. You could expose methods to trigger things in your widget with just simple javascript.

Let me know if you want more details!

 Reply