Skip to main content

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.

Required Parameters​

ParameterDescriptionAllowed Values
layoutShow the original or boxed version of Speakup Article Playeroriginal, boxed-small
themeSet the theme of Speakup Article Playerdefault, black-white
langSet the language of Speakup Article PlayerSee Available Languages

Optional Parameters​

ParameterDescriptionAllowed ValuesDefault
podcastShow a specific podcast regardless of the page URLValue from API or CMS-
playlistShow a specific playlist built by CMSValue from CMS-
showplaylistForce or not the playlist to be displayed"true", "false"CMS value
prmMark content as "premium" for paywall logic"true", "false""false"
subscriberAuthorize user/browser to play premium content"true", "false""false"
advForce advertising on/off compared to CMS setting"true", "false"CMS value
hideHide player but leave content-making functions active"true", "false"-
listen-labelLabel shown when waiting for first play clickMax 30 characters"Listen to this article now..."
loading-delayDelay player loading by millisecondsNumeric value0
defer-on-scrollLoad player only after user scrolls"true", "false""false"

Available Languages​

Languagedata-lang Value
Italianit
Englishen
Chinesezh
Japaneseja
Russianru
Arabicar
Spanishes
Portuguesept
Greekgr
Frenchfr
Hebrewhe
Albaniansq
Thaith
Polishpl
Romanianro

Complete Example​

Here's a complete example integrating the Speakup Article player:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Article</title>
    
    <!-- Speakup Article Player Script -->
    <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>
</head>
<body>
    <article>
        <h1>Article Title</h1>
        
        <!-- Player Container with CLS-prevention styles -->
        <style>
        #speakup-player { margin: 15px 0 !important; max-width: none !important; min-height: 130px !important; }
        </style>
        <div id="speakup-player"></div>
        
        <p>Your article content starts here...</p>
    </article>
</body>
</html>

Need Help?​

If you have any doubts, do not hesitate to contact us at support@audioboost.com.