Stoked Embed Widget

Overview

The Stoked Embed Widget provides an easy-to-use floating button that opens a modal containing an embedded iframe. This modal can be customized in terms of appearance, placement, behavior, and accessibility. The widget supports:

✅ Lazy Loading: The iframe only loads when the modal opens.
✅ Multi-Language Support: Button text adjusts based on the <html lang> tag.
✅ Customizable Placement: Button position can be set via attributes.
✅ Delayed Appearance: Configure when the button appears after page load.
✅ Public API: Expose methods for showing/hiding the button and opening/closing the modal.
✅ Cross-Domain Communication: Pass parameters dynamically to the modal URL.
✅ Keyboard Accessibility: Supports focus trapping, Escape key closure, and tabindex navigation.
✅ Responsive Design: The modal adjusts dynamically based on screen size.

📌 How to Use the Widget

To integrate the widget, include the following script in your website:

<script src="https://yourstokedcommunity.stokedhq.com/get-stoked.js"
        defer
        data-position="lower-right"
        data-button-en-text="Find an owner"
        data-button-color="#ff4500"
        data-button-text-color="#ffffff"
        data-button-delay="1"
        data-hide-button="false"
        data-modal-params="source=widget,userType=guest"> </script>

Find your js widget url in your Community Admin's settings.

How It Works:

The button appears at the configured position.
Clicking the button opens a modal with an embedded iframe.
The modal blacks out the background and resizes dynamically.
Users can close the modal by clicking outside, pressing Esc, or clicking the close button.
The modal URL receives query parameters specified via data-modal-params.

🔧 Configuration Options

Attribute	Description	Default
`data-position`	Button placement (`upper-left`, `upper-right`, `lower-left`, `lower-right`)	`lower-left`
`data-button-en-text`	Button text in English	"Open Stoked"
`data-button-color`	Button background color	`#e53b2a`
`data-button-text-color`	Button text color	`#ffffff`
`data-button-delay`	Delay before the button appears (in seconds)	`0`
`data-hide-button`	If `true`, hides the button until `showButton()` is called	`false`
`data-modal-params`	Comma-separated key-value pairs passed to the modal URL	`""`

🌎 Multi-Language Support

The widget detects the page’s `` attribute and selects the appropriate text for the button. The button text priority follows this order:

1️⃣ data-button-{language}-text (e.g., data-button-fr-text for <html lang="fr">) 2️⃣ data-button-en-text (default English text) 3️⃣ "Open Stoked" (fallback)

Example: Spanish Website (``)

<script src="https://yourstokedcommunity.stokedhq.com/get-stoked.js"
        defer 
        data-button-en-text="Find an owner"
        data-button-es-text="Encontrar un dueño"> </script>

✅ The button will show “Encontrar un dueño”.

🎨 Customizing the Button & Modal

For additional customization, you can use CSS classes:

CSS Class	Description
`.stoked--button`	Styles the floating button
`.stoked--modal`	Styles the full-screen overlay/modal background
`.stoked--iframe-container`	Styles the modal content container
`.stoked--close-button`	Styles the close (`×`) button

Example: Custom Button Style

.stoked--button {
  background-color: #34a853 !important;
  color: white !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  padding: 12px 20px !important;
}

Example: Custom Modal Style

.stoked--modal {
  background: rgba(0, 0, 0, 0.85) !important;
}

🛠 Public API Methods

You can control the widget programmatically using the StokedWidget API.

Method	Description
`StokedWidget.showButton()`	Show the button manually
`StokedWidget.hideButton()`	Hide the button manually
`StokedWidget.openModal()`	Open the modal manually
`StokedWidget.closeModal()`	Close the modal manually

Example: Show Button on Scroll

window.addEventListener("scroll", function() {
  if (window.scrollY > 300) {
    StokedWidget.showButton();
  }
});

📡 Passing Parameters to the Modal

If you need to pass custom parameters to the modal, use the data-modal-params attribute.

<script src="https://yourstokedcommunity.stokedhq.com/get-stoked.js"
        defer 
        data-modal-params="userId=123,referral=homepage"> </script>

This results in the iframe URL:

https://yourstokedcommunity.stokedhq.com/?lang=en&userId=123&referral=homepage