[SOLVED] How to embed an external widget to a page in Bolt?

How to embed an external widget to a page in Bolt?

I'm trying to embed a booking system widget to my bolt homepage (the one and only homepage, using base-2018 theme). I paste it into the Content window, selecting Source first. Bolt seems to interpret what is going on, as various tags and IDs are highlighted in the code.

The widget code is roughly so:

<div id="bokun [blabla]">Loading...</div>
<p><script type="text/javascript"><br />
var w15;<br />
(function(d, t) {<br />
  var host = 'widgets.bokun.io';<br />
  var frameUrl = 'https://' + host + '/widgets/15';<br />
  var s = d.createElement(t), options = {'host': host, 'frameUrl': frameUrl, 'widgetHash':'w15', 'autoResize':true,'height':'','width':'100%', 'minHeight': 0,'async':true, 'ssl':true, 'affiliateTrackingCode': '', 'transientSession': true, 'cookieLifetime': 43200 };<br />
  s.src = 'https://' + host + '/assets/javascripts/widgets/embedder.js';<br />
  s.onload = s.onreadystatechange = function() {<br />
    var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;<br />
    try {<br />
      w15 = new BokunWidgetEmbedder(); w15.initialize(options); w15.display();<br />
    } catch (e) {}<br />
  };<br />
  var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);<br />
})(document, 'script');<br />
</script></p>

I have only edited out the unique ID this widget has. Otherwise, this is copied from the provider and works on my current Wordpress site...ALTHOUGH when I paste it into Wordpress, the editor notifies me that "there's something wrong" and offers me to correct it.

How do I insert this? Do I need to create a .js file and reference it in compliance with Twig standards and if so, how do I? I should also note that the widget will redirect to a different page within the same site once you press something within it. Thank you.

Bolt version: 3.6.5

Solution