@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
80 lines (68 loc) • 2.02 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;
}
.tag-search {
display: flex;
margin-bottom: 1.5rem;
}
input {
margin-right: 1rem;
}
#tag-input {
width: 6rem;
}
</style>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<h2>Discover Collections</h2>
<p>
The stories below are loaded with a collection embed that gets it's settings
from the API.
</p>
<div class="gobi-collection" data-gobi-collection-id="demo"></div>
<p>
You can also load a collection using a team id and a tag.
</p>
<form class="tag-search" onSubmit="searchTag(); return false">
<label>
<span>Team Uuid:</span>
<input id="team-input" type="text" name="team" value="demos" />
</label>
<label>
<span>Tag:</span>
<input id="tag-input" type="text" name="tag" value="demo" />
</label>
<button type="submit">Search</button>
</form>
<div id="tag-search-result"></div>
<script>
gobi.discover({
apiBaseUrl: runConfig.apiBaseUrl,
observerDepth: 1,
});
function searchTag() {
const teamId = document.getElementById("team-input").value;
const tag = document.getElementById("tag-input").value;
if (teamId && tag) {
const element = document.createElement("div");
element.classList.add("gobi-collection");
element.setAttribute("data-gobi-team-id", teamId);
element.setAttribute("data-gobi-collection-tag", tag);
document.getElementById("tag-search-result").replaceChildren(element);
gobi.discover({ apiBaseUrl: runConfig.apiBaseUrl });
}
}
</script>
</body>
</html>