@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
69 lines (64 loc) • 3.88 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gobi - Web Integration test</title>
<script type="text/javascript" src="/dist/run-config.js"></script>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<h3>Single Story - Class and Data</h3>
<div class="gobi-stories" data-gobi-story="demo01" data-gobi-size="100px" data-gobi-disable-shadow-dom="false"></div>
<h3>Multiple Stories - Class and Data</h3>
<div class="gobi-stories" data-gobi-stories="demo02 demo03" data-gobi-color="#00ffff" data-gobi-wrap="true"
data-gobi-disable-shadow-dom="false"></div>
<div id="shadowHost"></div>
<script>
const ua = navigator.userAgent;
if ((ua.indexOf('MSIE ') <= 0) && !ua.match(/Trident.*rv\:11\./)) {
var shadowHost = document.querySelector("#shadowHost");
shadowHost.attachShadow({ mode: 'open' });
shadowHost.shadowRoot.innerHTML =
'<h3>Single Story - Class and Data</h3>' +
'<div class="gobi-stories" data-gobi-story="demo01" data-gobi-size="100px" data-gobi-disable-shadow-dom="false"></div>' +
'<h3>Multiple Stories - Class and Data</h3>' +
'<div class="gobi-stories" data-gobi-stories="demo02 demo03" data-gobi-color="#00ffff" data-gobi-wrap="true" data-gobi-disable-shadow-dom="false"></div>' +
'<h3>All Options - Class and Data</h3>' +
'<div class="gobi-stories"' +
' data-gobi-stories="demo04 demo05"' +
' data-gobi-color="#0000ff"' +
' data-gobi-vertical-orientation="true"' +
' data-gobi-animated-bubble="false"' +
' data-gobi-bubble-size="250px"' +
' data-gobi-show-play-icon="true"' +
' data-gobi-play-icon-url="https://cdn.iconscout.com/icon/free/png-256/play-213-386758.png"' +
' data-gobi-align="left"' +
' data-gobi-auto-segue="true"' +
' data-gobi-hide-title="false"' +
' data-gobi-is-full-height-mobile="false"' +
' data-gobi-auto-start="true"' +
' data-gobi-auto-start-with-sound="false"' +
' data-gobi-save-position="true"' +
' data-gobi-loop="true"' +
' data-gobi-width="20"' +
' data-gobi-height="20"' +
' data-gobi-check-view-port="false"' +
' data-gobi-play-button="false"' +
' data-gobi-use-media-proxy="true"' +
' data-gobi-title-font-size="2rem"' +
' data-gobi-title-font-color="blue"' +
' data-gobi-title-font-weight="600"' +
' data-gobi-title-font-family="Arial"' +
' data-gobi-disable-shadow-dom="false"' +
'></div>' +
'<h3>Single Story - Classes Only</h3>' +
'<div class="gobi-stories gobi-story-demo06 gobi-color-gold gobi-bubble-size-125px gobi-animated-bubble-false gobi-disable-shadow-dom-false"></div>' +
'<h3>Multiple Stories - Classes Only</h3>' +
'<div class="gobi-stories gobi-stories-demo07-demo08 gobi-color-#ff0000 gobi-size-200px gobi-wrap-true gobi-disable-shadow-dom-false"></div>' +
'<h3>All Options - Classes Only</h3>' +
'<div class="gobi-stories gobi-stories-demo09-demo10 gobi-color-#0000ff gobi-vertical-orientation-true gobi-animated-bubble-false gobi-bubble-size-250px gobi-show-play-icon-true gobi-play-icon-url-https://cdn.iconscout.com/icon/free/png-256/play-213-386758.png gobi-align-left gobi-auto-segue-true gobi-hide-title-true gobi-is-full-height-mobile-false gobi-auto-start-true gobi-auto-start-with-sound-false gobi-save-position-true gobi-loop-true gobi-width-20 gobi-height-20 gobi-check-view-port-false gobi-play-button-false gobi-use-media-proxy-true gobi-disable-shadow-dom-false"></div>';
};
gobi.discover({ apiBaseUrl: runConfig.apiBaseUrl, shadowSelector: '#shadowHost' });
</script>
</body>
</html>