STOGS-BOT Component Demo

Search Modal

Opens the search interface inside a modal when the button is clicked.

<!-- Import the library -->
<script
    type="module"
    src="https://27a6d133-ce8c-4557-b590-02699b0cb9b9.search.ai.cloudflare.com/assets/v0.0.40/search-snippet.es.js">
</script>

<button id="open-search">
    Open Search
</button>

<search-modal-snippet
    api-url="https://27a6d133-ce8c-4557-b590-02699b0cb9b9.search.ai.cloudflare.com"
    show-url="true"
    theme="light"
    hide-branding="true">
</search-modal-snippet>

<style>
search-modal-snippet {
    --search-snippet-primary-color: #663399;
    --search-snippet-primary-hover: #dedede;
    --search-snippet-focus-ring: #663399;
    --search-snippet-border-color: #663399;
}
</style>

<script>
const modal = document.querySelector("search-modal-snippet");

document.getElementById("open-search")
    .addEventListener("click", () => modal.open());
</script>

Search Bar

Embed the search bar directly into any page.

<!-- Import the library -->
<script
    type="module"
    src="https://27a6d133-ce8c-4557-b590-02699b0cb9b9.search.ai.cloudflare.com/assets/v0.0.40/search-snippet.es.js">
</script>

<search-bar-snippet
    api-url="https://27a6d133-ce8c-4557-b590-02699b0cb9b9.search.ai.cloudflare.com"
    show-url="true"
    theme="light"
    hide-branding="true">
</search-bar-snippet>

<style>
search-bar-snippet {
    --search-snippet-primary-color: #663399;
    --search-snippet-primary-hover: #dedede;
    --search-snippet-focus-ring: #663399;
    --search-snippet-border-color: #663399;
}
</style>

Chat Bubble

Adds a floating chatbot launcher to the bottom-right corner of your website.

The chat bubble will appear in the bottom-right corner.

<!-- Import the library -->
<script
    type="module"
    src="https://27a6d133-ce8c-4557-b590-02699b0cb9b9.search.ai.cloudflare.com/assets/v0.0.40/search-snippet.es.js">
</script>

<chat-bubble-snippet
    api-url="https://27a6d133-ce8c-4557-b590-02699b0cb9b9.search.ai.cloudflare.com"
    theme="light"
    hide-branding="true">
</chat-bubble-snippet>

<style>
chat-bubble-snippet {
    --search-snippet-primary-color: #663399;
    --search-snippet-primary-hover: #dedede;
    --search-snippet-focus-ring: #663399;
    --search-snippet-border-color: #663399;
}
</style>