Making an embeddable div for other websites

[samilkarahisar]

It is hard to explain and it is even harder to search the net about my question. So I thought I would ask you guys.

I want to make a div embeddable to anyones website.
What I mean by that is, lets say I have a chat providing website. A website where you can open a chat session for yourself and share it with your friends. That means I will have links like: mychatwebsite.com/chatname1

What I want to do is, when the creator of the chat wants to share this chat he created, I want to give him a script, or whatever, so that he can copy and paste that to his own websites html code. Than the chat div coming from my webside will be seen on his website directly.

This chatwebsite is NOT what my website is about. I am just giving an exemple.

Another example of this would be the Twitter Cards, twitter provides a html link like this:

<blockquote class="twitter-tweet" data-lang="tr">
<p lang="en" dir="len">
 <a href="https://t.co/xx"> https://t.co/xx </a>
</p> 
<a href="https://twitter.com/xx"></a>
</blockquote> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script> 

When you paste this on your website, it shows the twitter card, designed by twitter.

So what is the idea behind how this works?

[markbrown4]

You want to search for “making javascript widgets”, <script>'s in a page are allowed to make ajax requests to other servers and manipulate the page with DOM scripting.

There’s lots of ways to do it but a common way is to embed an <iframe> in the parent page. A nice thing about this approach is that it doesn’t inherit any of the css / js from the parent page so is isolated. You can be sure that the iframe will display the same way on every site it’s embedded in.

[samilkarahisar]

@markbrown4

making javascript widgets

thank you very much.