Display styles – pill, popup, tab
How widget and message can appear on your website – inline or floating.
Both building blocks (recording widget and Listen to a message) come in five display styles. You choose them in the WordPress plugin, in the block, via shortcode or with data-art in the snippet.
| Display style | data-art |
What it looks like |
|---|---|---|
| Inline | text |
fixed at one spot on the page, height adjusts automatically |
| Pill → panel | knopf |
small button in the bottom corner, opens a panel above it |
| Pill → window | popup |
small button at the bottom, opens a window in the centre with a dimmed background |
| Tab | lasche |
vertical tab on the left or right edge, opens a window |
| Round button | rund |
just a round icon in the bottom corner, opens a panel |
Close with ×, the Escape key or a click next to the window.
Parameters
| Attribute | Meaning | Example |
|---|---|---|
data-text |
label of the button | Leave a message |
data-position |
rechts (right) or links (left) |
rechts |
data-farbe |
colour of the button – for the widget also applies inside (microphone, send) | #0f766e |
data-textfarbe |
text colour on the button | #ffffff |
data-breite |
inline only: width of the frame | 100% |
data-datenschutz |
widget only: link to your privacy policy (the plugin sets it automatically) | https://…/privacy |
Example – widget as a window, green, on the right:
<script src="https://speeeak.io/js/widget.js" data-widget="YOUR-KEY"
data-art="popup" data-text="Leave a message" data-position="rechts"
data-farbe="#0f766e" data-textfarbe="#ffffff" async></script>
💡 Tip: Two floating elements on one page? Put one on the left and one on the right – or use the tab for the message and the pill for the widget.
How it works technically
The snippet loads a small script from speeeak.io that draws the button and, on opening, shows a frame (iframe) with the Speeeak page. Your website never sees any recordings, no cookies are set, nothing is tracked. Speeeak reports the height of the frame to your page so nothing gets cut off.