@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
57 lines (49 loc) • 1.92 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>
img.bubble {
max-width: 100px;
}
</style>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<h3>Opening Popup Player Programmatically</h3>
<p>Two stories with homemade thumbnails and auto segue using Popups and initialized with discover()</p>
<img class="bubble" src="https://res.cloudinary.com/gobi-dev/image/upload/v1639582926/examples/pizza_m0t4yt.png"
onClick="handleClick('demo13')" />
<img class="bubble" src="https://res.cloudinary.com/gobi-dev/image/upload/v1639582926/examples/pizza_m0t4yt.png"
onClick="handleClick('demo19')" />
<p>Two stories with bubbles initialized with discover and homemade buttons that also open them</p>
<div class="gobi-stories" data-gobi-stories="demo20 demo14" data-gobi-auto-start-with-sound="true"
data-gobi-auto-segue="true" data-gobi-align="left"></div>
<button onClick="handleClick('demo20')">
demo20
</button>
<button onClick="handleClick('demo14')">
demo14
</button>
<p>Popup without an element or preloading</p>
<button onClick="openPopup('demo11')">Popup</button>
<div class="gobi-popups" data-gobi-stories="demo13 demo19" data-gobi-auto-start-with-sound="true"
data-gobi-auto-segue="true"></div>
<script>
var gobiController;
gobi.discover({ apiBaseUrl: runConfig.apiBaseUrl }, (controller) => {
gobiController = controller;
});
function handleClick(viewKey) {
if (gobiController) {
gobiController.openPopup(viewKey);
}
}
function openPopup(viewKey) {
gobi.openPopup(viewKey, { apiBaseUrl: runConfig.apiBaseUrl });
}
</script>
</body>
</html>