Embed a clip
Every tagged segment has a player that starts where the company is discussed. Press Share on a segment, open “Embed this clip” and paste the code into your page. Change the look with the options below.
Try it
Options
Add them to the player’s address: https://invocals.com/embed/TAG_ID?theme=light.
A value the player does not understand is ignored, and the default is used.
| Parameter | Values | What it does |
|---|---|---|
theme | dark (default), light | The player’s colour scheme. Pick the one closest to your page. |
bgColor | a colour | Background of the player. transparent lets your page show through. |
textColor | a colour | Text and icons; the lines and track are drawn in lighter tones of it. |
accentColor | a colour | The play button. Its icon turns white or black, whichever reads best. |
tagbarColor | a colour | The segment and the progress on the timeline. |
mode | inline (default), fixed | inline fills the frame; fixed docks the player at the bottom of
it. |
Colours are hex (#0d1117, #fff, with alpha #0d1117cc;
the # may be left out or written %23), rgb()/rgba(), hsl()/hsla() with comma-separated numbers, or transparent. Colour names are not supported.
The frame
The code sets width="100%", height="240" and a max-width of 640px; change them to fit your layout. Keep the allow attribute: autoplay lets the player start when a listener
presses play, clipboard-write lets it copy its link, and web-share opens the device’s share sheet. Without them the player still plays, and Share opens the clip on
invocals.com instead.
Events
The player tells your page what it is doing with postMessage. Listen for messages
from https://invocals.com where source is "invocals".
| type | Sent when |
|---|---|
invocals:play | Playback starts or resumes. |
invocals:pause | Playback is paused. |
invocals:ended | The episode plays to its end. |
invocals:stop | The player is closed. The embed has no close button, so it is not sent today. |
Each message also carries tagId, episodeId, contentId (the company’s LEI) and podcastId.
window.addEventListener('message', (event) => {
if (event.origin !== 'https://invocals.com') return
if (event.data?.source !== 'invocals') return
console.log(event.data.type, event.data.contentId)
})Questions or something missing? Tell us.