How to expose HTML widgets from server

I saw websites that let you import in your own website embedabble complex HTML widgets with few javascript lines.

Here an example from a Gamification website :

<div id='cptup-ready'></div> 
<script data-cfasync='false' type='text/javascript'>
    window.captain = {up: function(fn) { captain.topics.push(fn) }, topics: []};
    // Add your settings here:
    captain.up({
        api_key: 'api key'
    });
</script>
<script data-cfasync='false' type='text/javascript'>
    (function() {
        var cpt = document.createElement('script'); cpt.type = 'text/javascript'; cpt.async = true;
        cpt.src = 'http://ift.tt/1U8UTuo';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(cpt);
    })();
</script>

Paste this code in your HTML body display this result :Result

I would like to use the same process for a school project, being able to integrate my own complex HTML UI from a server on any website, simply by pasting few lines of code,but i don't really understand how it could be possible, and the technologies behind this.