@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
58 lines (53 loc) • 1.91 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>
<style>
.stories {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
</style>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<h2>Global Discover Options</h2>
<p>
The stories below are four seperate embeds created with <code>gobi.discover()</code>.
Global options are provided for the bubbles and players which are applied to every embed.
The default options are set to:
</p>
<ul>
<li><code>bubbleSize</code> is set to <code>100px</code>.</li>
<li><code>color</code> is set to <code>blue</code>.</li>
<li><code>autoStartWithSound</code> is set to <code>true</code>.</li>
</ul>
<p>The bubbles override the global options with:</p>
<ul>
<li>The first story does not override any configuration.</li>
<li>The second story overrides <code>bubbleSize</code>.</li>
<li>The third story overrides <code>color</code>.</li>
<li>The fourth story overrides <code>autoStartWithSound</code> to false.</li>
</ul>
<div class="stories">
<div class="gobi-stories" data-gobi-stories="demo04"></div>
<div class="gobi-stories" data-gobi-stories="demo05" data-gobi-bubble-size="180px"></div>
<div class="gobi-stories" data-gobi-stories="demo19" data-gobi-color="red"></div>
<div class="gobi-stories" data-gobi-stories="demo20" data-gobi-auto-start-with-sound="false"></div>
</div>
<script>
gobi.discover({
apiBaseUrl: runConfig.apiBaseUrl,
bubbleSize: "100px",
color: "blue",
playerOptions: {
autoStartWithSound: true,
},
});
</script>
</body>
</html>