Gyde Widget (App Embed)
Set up the Gyde floating bubble widget that appears on every page of your Shopify store.
The Gyde Widget App Embed adds a floating quiz bubble to every page of your store. Shoppers click the bubble to open a quiz in an overlay without leaving the page. Enabling this App Embed also loads the Gyde embed script site-wide — required for the Modal Button and Full Page embed methods to work.
Enable the App Embed
- In your Shopify admin, go to Online Store → Themes.
- Click Customize on your active theme.
- In the left sidebar, click the App embeds icon (puzzle piece).
- Find Gyde Widget and toggle it on.
- Configure the settings (see below), then click Save.
You can also reach this screen directly from the Gyde app via Quiz → Share → Embed Guide → Floating Popup → Open App Embeds.
Settings reference
Enable Gyde widget
Master toggle. Must be on for the bubble — and the embed script — to load.
Quiz handle
The handle of the quiz to open when the bubble is clicked (e.g. skin-type-quiz). Find it in the Gyde app at Quiz → Settings → Widget → Quiz handle.
Leave blank to automatically load all published popup quizzes. Each published popup quiz creates its own bubble.
Show widget on
| Option | Description |
|---|---|
| All pages | Bubble appears on every page of the store (default) |
| Product pages only | Bubble only appears when a customer is viewing a product page |
Hide bubble on product pages
When on, the bubble stays hidden on product pages until a shopper adds a product to cart — then the teaser appears. Useful for stores that want cart-triggered engagement rather than always-on visibility.
Bubble shape
| Option | Description |
|---|---|
| Circle | Round icon button — clean and unobtrusive |
| Rectangular banner | Pill-shaped button with a text label — more prominent |
Widget position
| Option | Description |
|---|---|
| Bottom right | Default position |
| Bottom left | For themes where bottom-right conflicts with chat widgets or cookie banners |
Bubble color
Background fill of the bubble. Default: #6366f1 (indigo). Use your brand's primary colour.
Show teaser on page load
When on, a tooltip card appears above the bubble after a short delay on page load.
When off, the teaser only appears when a shopper adds a product to their cart — a more contextual trigger that catches shoppers at a decision-making moment.
Teaser message
Text shown in the teaser tooltip (e.g. "Need help? Try our quiz!"). Keep it to one short sentence.
Button text (banner shape only)
Label on the rectangular banner button (e.g. "Find Your Perfect Match"). Only shown when Bubble shape is set to Rectangular banner.
Troubleshooting
Bubble isn't showing
- Confirm the App Embed is toggled on and saved in the Theme Editor.
- Confirm the quiz is published in the Gyde app (display type set to Popup).
- If a quiz handle is set, verify it matches exactly — lowercase, hyphens, no spaces.
Bubble hidden behind other elements
- A theme CSS rule may be overriding the bubble's
z-index. Addz-index: 9999to.gyde-widget-containervia your theme's CSS editor.