Embedding Your Community

Add your Stoked community to any website. Choose between a floating button widget or a direct iframe embed.

The Stoked widget adds a customizable button to your website that opens your community in a modal. It’s the easiest way to integrate Stoked without disrupting your page layout.

Features

Lazy loading - The community only loads when visitors click the button
Multi-language support - Button text adapts to your page’s language
Customizable positioning - Place the button in any corner
Delayed appearance - Optionally wait before showing the button
Keyboard accessible - Supports Escape key to close

Basic Setup

Add this script tag to your website, just before the closing </body> tag:

<script src="https://your-community.stokedhq.com/get-stoked.js"
  defer
  data-position="lower-right"
  data-button-en-text="Find an Owner"
  data-button-color="#e53b2a"
  data-button-text-color="#ffffff">
</script>

Replace your-community with your actual Stoked community subdomain.

Configuration Options

Attribute	Description	Default
`data-position`	Button location: `lower-left`, `lower-right`, `upper-left`, `upper-right`	`lower-left`
`data-button-en-text`	English button text	`Open Stoked`
`data-button-color`	Button background color	`#e53b2a`
`data-button-text-color`	Button text color	`#ffffff`
`data-button-delay`	Seconds to wait before showing button	`0`
`data-hide-button`	Start with button hidden	`false`
`data-modal-params`	Query parameters to pass to the modal	(empty)

Multi-Language Button Text

Set button text for different languages using the language code:

<script src="https://your-community.stokedhq.com/get-stoked.js"
  defer
  data-button-en-text="Find an Owner"
  data-button-es-text="Encontrar un Dueño"
  data-button-fr-text="Trouver un Propriétaire">
</script>

The widget automatically uses the appropriate text based on your page’s lang attribute.

JavaScript API

Control the widget programmatically:

// Show or hide the button
StokedWidget.showButton();
StokedWidget.hideButton();

// Open or close the modal
StokedWidget.openModal();
StokedWidget.closeModal();

Passing Custom Parameters

Use data-modal-params to pass data to your community:

data-modal-params="source=homepage,campaign=spring2024"

These parameters appear in your analytics and can help track where conversations originate.

Customize the widget appearance with CSS:

.stoked--button {
  /* Button styles */
}

.stoked--modal {
  /* Modal container styles */
}

.stoked--close-button {
  /* Close button styles */
}

Iframe Embed

For more control over placement, embed your community directly in your page using an iframe.

Getting Your Embed Code

Go to Settings in your admin portal
Find the Embed Code section
Copy the provided iframe code
Paste it into your website’s HTML

Example Code

<iframe
  src="https://your-community.embeds.stoked.app"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Tips

Set the height to at least 500px for the best experience
The embed automatically adapts to your iframe’s width
Works across all modern browsers including Safari
Embedded visits are tracked separately in your analytics