Integrate Speakup Article Player in your website
Step 1: Add the Player Script To get started, you’ll need to add a script to your webpage.
Copy and Paste the Script Below into the <head> or <body> section of your webpage before the start of your article:
<script
id="speakup-player-script"
src="https://cdn.speakup.ai/loader.speakup.min.js"
data-lang="en"
data-layout="boxed-small"
data-theme="default"
async
></script>
Step 2: Add the Player Container and the Style Place the following container code right before the article text begins:
<style>
#speakup-player { margin: 15px 0 !important; max-width: none !important; min-height: 130px !important; } #speakup-player:not(#speakup-player:has(.speakup-container))::after { align-items: center; background-color: #fff; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); font-family: sans-serif; content: 'Loading...'; display: flex !important; font-size: 13px; font-weight: 700; line-height: 1; justify-content: center; max-width: 750px; margin: 0 auto; min-height: 130px; text-transform: uppercase; } #speakup-player:not(#speakup-player:has(.speakup-container)) { display: block; } @media (prefers-color-scheme: dark) { #speakup-player:not(#speakup-player:has(.speakup-container))::after { color: #fff; background-color: #000; } }
</style>
<div id="speakup-player"></div>
The provided CSS is made so your website won't suffer of layout shifting, causing a issue in Core Web Vitals metrics misuration (CLS).
Customization options​
All the options listed below, have to be prefixed with data-* as per the HTML standard.
| Data parameter | Description | Required | Allowed values | Default value |
|---|---|---|---|---|
layout | Show the original or boxed version of SpeakUp Article Player | yes | original, boxed-small | - |
theme | Set the theme of SpeakUp Article Player | yes | default, black-white | - |
lang | Set the language of SpeakUp Article Player | yes | See related table below | - |
podcast | Show a specific podcast regardless of the page (URL) on which SpeakUp Article Player is embedded | no | value provided by API or CMS | - |
playlist | Show a specific playlist built by CMS | no | value provided by CMS | - |
showplaylist | Force or not the playlist to be displayed with reference to the setting set on the CMS | no | "true", "false" | Value from CMS |
prm | Identify whether the content is "premium" or not. Used for paywall logic and to limit access only to "subscriber" users | no | "true", "false" | "false" |
subscriber | Identify the user/browser as authorized to play "premium" content | no | "true", "false" | "false" |
adv | Force or not to play advertising compared to the setting set on the CMS | no | "true", "false" | Value from CMS |
hide | Hide SpeakUp Article Player but leave content-making functions active | no | "true", "false" | - |
listen-label | Label showed when the player is waiting for the first click on play | no | max string length 30 characters including spaces | "Listen to this article now..." |
Available languages​
| Language | Data-lang value |
|---|---|
| Italian | it |
| English | en |
| Chinese | zh |
| Japanese | ja |
| Russian | ru |
| Arabic | ar |
| Spanish | es |
| Portuguese | pt |
| Greek | gr |
| French | fr |
| Hebrew | he |
| Albanian | sq |
| Thai | th |
| Polish | pl |
| Romanian | ro |