Embedding Your Community

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

Floating Button Widget

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

You can use the Embed Code Configurator in Settings → Widgets to customize these options visually and copy the generated embed code.

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.

Styling the Widget

Customize the widget appearance with CSS:

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

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

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

Map Embed Widget

Embed your community map directly in your page. The map widget script creates a responsive iframe automatically.

Basic Setup

Add this script tag where you want the map to appear:

<script src="https://your-community.embeds.stokedhq.com/get-stoked-embedded-map.js"
  defer>
</script>

Replace your-community with your actual Stoked community subdomain.

Configuration Options

You can use the Embed Code Configurator in Settings → Widgets to customize these options visually and copy the generated embed code.

Example Code

<script src="https://your-community.embeds.stokedhq.com/get-stoked-embedded-map.js"
  defer
  data-width="100%"
  data-height="500px"
  data-title="Find an Advocate Near You">
</script>

Tips

• Set the height to at least 500px for the best experience
• The embed automatically adapts to the configured width
• The map resizes dynamically to fit its content
• Works across all modern browsers including Safari