如何从服务器公开HTML小部件

Question

我看到网站允许您在自己的网站中导入嵌入了复杂的HTML小部件，几乎没有javascript行。

这是Gamification网站的一个例子：

<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 = 'https://captainup.com/assets/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(cpt);
    })();
</script>

将此代码粘贴到HTML正文中会显示以下结果：Result

我想对学校项目使用相同的过程，能够在任何网站上集成我自己的复杂HTML用户界面，只需粘贴几行代码，但我真的不明白如何它有可能，以及背后的技术。