Iframe Embed
Quote Gallery provides a hosted embed page you can drop into any website as an <iframe>. It renders a fully animated quote slideshow with no JavaScript required on your end.
Quick start
<iframe
src="https://quotegallery.nl/embed?embedToken=YOUR_TOKEN"
width="800"
height="450"
frameborder="0"
allowfullscreen
></iframe>
Replace YOUR_TOKEN with a token generated in your Embed Generator.
Getting an embed token
Embed tokens let you control which quotes appear and restrict which domains can load the embed.
- Go to Dashboard → Embed Generator
- Select a playlist, configure styling, and set allowed domains
- Click Create Token and copy the value
- Use it as the
embedTokenquery parameter
URL parameters
You can override any embed setting per-embed by appending query parameters. URL params take precedence over token defaults.
Data source
| Parameter | Type | Default | Description |
|---|---|---|---|
embedToken | string | Secure token from the Embed Generator. Mutually exclusive with quotesUrl | |
quotesUrl | string | URL of an external JSON API returning an array of quote objects | |
textField | string | text | JSON field name for quote text when using quotesUrl |
authorField | string | author | JSON field name for author when using quotesUrl |
quotesUrl does not require an embed token, but your external API must return valid JSON and allow cross-origin requests (CORS).Appearance
| Parameter | Type | Default | Description |
|---|---|---|---|
bgType | string | solid | Background type (solid for a flat color) |
bgColor | string | #000000 | Background color as a hex value (include #) |
textColor | string | #ffffff | Quote text color |
authorColor | string | #999999 | Author name color |
font | string | (system) | Font name for both quote and author text |
autoSize | boolean | true | Scale quote text to fit the container |
showAuthor | boolean | true | Show or hide the author name |
Playback
| Parameter | Type | Default | Description |
|---|---|---|---|
quoteInterval | number | 10 | Seconds each quote is displayed |
transition | string | blur-scale | Transition animation between quotes |
showProgress | boolean | false | Show a countdown progress indicator |
controls | boolean | true | Show previous, next, and pause controls |
Examples
Custom colors, no controls
<iframe
src="https://quotegallery.nl/embed?embedToken=YOUR_TOKEN&bgColor=%23181818&textColor=%23f5f5f0&authorColor=%23e08c2b&controls=false"
width="100%"
height="300"
frameborder="0"
></iframe>
# as %23 when building embed URLs by hand. Most templating engines handle this automatically.Slow rotation with progress bar
<iframe
src="https://quotegallery.nl/embed?embedToken=YOUR_TOKEN"eInterval=30&showProgress=true"
width="800"
height="450"
frameborder="0"
></iframe>
External quote API (no token)
<iframe
src="https://quotegallery.nl/embed?quotesUrl=https%3A%2F%2Fapi.example.com%2Fquotes&textField=body&authorField=name"
width="800"
height="450"
frameborder="0"
></iframe>
The external API should return either a plain array [{ body: "...", name: "..." }] or an object with a top-level array key (data, quotes, or results).
Responsive sizing
Use percentage widths and aspect-ratio to make the embed fluid:
<div style="position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;">
<iframe
src="https://quotegallery.nl/embed?embedToken=YOUR_TOKEN"
style="position: absolute; inset: 0; width: 100%; height: 100%; border: none;"
allowfullscreen
></iframe>
</div>
Domain restrictions
When creating an embed token you can restrict it to specific domains. Requests from unlisted domains show an error inside the embed instead of loading quotes.
To test locally, add localhost as an allowed domain in the Embed Generator.
Embed Generator
The Embed Generator in your dashboard builds the <iframe> snippet for you with a live preview. Use it to pick a playlist, style colors and fonts, set rotation speed, restrict domains, and copy the final tag ready to paste.