@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
120 lines (115 loc) • 4.63 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>Render Supplied to GWI</h3>
<p>In this example the story render is supplied to the GWI via the option
<pre>renders</pre>
</p>
<p>GWI will not make an API call to fetch the story data and will instead use the data provided</p>
<div id="inner-html-container"></div>
<div id="gobi-module-container"></div>
<script>
const render = {
"viewKey": "mbaa5",
"version": 1,
"title": "Edit Me!",
"videoUrl": "https://res.cloudinary.com/gobi-technologies-as/video/upload/fl_splice,l_video:__defaultStory:chapter-002/fl_layer_apply/fl_splice,l_video:__defaultStory:chapter-003/fl_layer_apply/fl_splice,l_video:__defaultStory:chapter-004/fl_layer_apply/v1/__defaultStory/chapter-001.mp4",
"streamingUrl": "https://res.cloudinary.com/gobi-technologies-as/video/upload/fl_splice,l_video:__defaultStory:chapter-002/fl_layer_apply/fl_splice,l_video:__defaultStory:chapter-003/fl_layer_apply/fl_splice,l_video:__defaultStory:chapter-004/fl_layer_apply/sp_gobi-fullsize-many-bitrates/v1/__defaultStory/chapter-001.m3u8",
"thumbnailUrl": "https://res.cloudinary.com/gobi-technologies-as/video/upload/c_fill,h_200,w_200/v1/__defaultStory/chapter-001.jpg",
"animatedThumbnailUrl": "https://res.cloudinary.com/gobi-technologies-as/video/upload/c_fill,du_2,e_boomerang,h_200,w_200/e_loop/fl_lossy,q_auto:best/v1/__defaultStory/chapter-001.gif",
"posterUrl": "https://res.cloudinary.com/gobi-technologies-as/video/upload/c_fill/v1/__defaultStory/chapter-001.jpg",
"chapters": [
{
"id": "a7c723fe-c726-4b8a-adcc-b4e1a864b2c3",
"order": 0,
"duration": 9.45067,
"stickers": []
},
{
"id": "6356915e-6b1c-4834-a03f-4c6a17f94de3",
"order": 1,
"duration": 12.288,
"stickers": []
},
{
"id": "ac9e0f46-9927-4586-8fbc-d99bf32d6178",
"order": 2,
"duration": 9.536,
"stickers": [
{
"type": "LINK",
"order": 0,
"x": 0.224249,
"y": 0.797082,
"scale": 0.321738,
"rotation": 0,
"imageUrl": "https://res.cloudinary.com/gobi-technologies-as/image/upload/v1/__defaultStory/sticker-001",
"linkUrl": "https://www.gobistories.com/integration-guides",
"text": null,
"textBold": false,
"textItalic": false,
"textUnderline": false,
"textAlign": "start",
"textPrimaryColor": "#fff",
"textSecondaryColor": "#000000b3",
"textContrastMode": "background",
"textFontSize": 22,
"textFillOpaque": false,
"textFontFamily": "open-sans"
},
{
"type": "LINK",
"order": 1,
"x": 0.772945,
"y": 0.797082,
"scale": 0.320538,
"rotation": 0,
"imageUrl": "https://res.cloudinary.com/gobi-technologies-as/image/upload/v1/__defaultStory/sticker-002",
"linkUrl": "https://www.gobistories.com/articles/how-to-create-great-stories",
"text": null,
"textBold": false,
"textItalic": false,
"textUnderline": false,
"textAlign": "start",
"textPrimaryColor": "#fff",
"textSecondaryColor": "#000000b3",
"textContrastMode": "background",
"textFontSize": 22,
"textFillOpaque": false,
"textFontFamily": "open-sans"
}
]
},
{
"id": "e9045dd8-485a-408e-90c6-6fa4d6a4902a",
"order": 3,
"duration": 13.7387,
"stickers": []
}
],
"whiteLabel": false
};
new gobi.Bubbles({
container: '#gobi-module-container',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
autoSegue: true,
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
renders: [render],
});
</script>
</body>
</html>