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.

Migration: ?tag= URLs no longer filter the public site. Earlier versions accepted ?tag=oregon (and ?tags=oregon,california&match_mode=all) on your public community URL to pre-filter the map. As of May 8, 2026 these parameters silently do nothing — they no longer filter advocates and no controls appear. If you’ve hard-coded ?tag=… links in marketing materials, replace them with a configured embed using the data-filters attribute (see the Configuration Options table below) generated by the Embed Code Configurator under Settings → Widgets. There is no URL-based replacement on the public landing page itself.

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"
  data-location="Powell, OH"
  data-zoom="metro">
</script>

Breaking Out of a Narrow Column

Many website builders place page content inside a centered column with a maximum width (often 700–1000px). Because the map embed is an iframe sized to its container, a narrow column gives the map little room — the search, map, and member profiles stack vertically and the cards feel cramped.

Set data-full-bleed="true" to let the map escape that column and use the full browser width instead. With more room, the map switches to its wider side-by-side layout (search and member list beside the map rather than stacked beneath it).

<script src="https://your-community.embeds.stokedhq.com/get-stoked-embedded-map.js"
  defer
  data-full-bleed="true"
  data-width="90%"
  data-height="800px">
</script>

How the two attributes work together when full-bleed is on:

• data-full-bleed="true" makes the embed span the full browser width, ignoring the page column it sits in.
• data-width then sets how much of that full width the map fills, centered. data-width="90%" leaves an even margin on each side; data-width="100%" (the default) goes edge to edge; a fixed value like data-width="1280px" caps it.

With full-bleed on, data-width is measured against the browser window, not your page’s content column — so the map will intentionally extend past your normal page margins. That’s the point, but it’s worth previewing on both desktop and mobile. On phones the map fills the screen and stacks as usual.

Pre-Filling Location and Zoom

Both widgets support optional data-location and data-zoom attributes to seed the map’s starting position:

• data-location accepts any free-text query the search box would (a city, ZIP/postal code, or address). It’s geocoded server-side and used to center the map.
• data-zoom accepts city, metro, state, region, or country and overrides the auto-computed zoom level. Any other value is silently ignored.
• Either attribute can be used independently. Omit both for the default behavior (the map centers on the visitor’s approximate location at the country level).

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