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"
	data-site="your-site-id"
	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).

Infinite scroll websites

If your site loads multiple articles on the same page, see Infinite Scroll Integration for recommended implementation options.

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
siteSite ID assigned to the website for Speakup Article PlayerValue from API or CMS

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. See Paywall Guide"true", "false""false"
subscriberAuthorize user/browser to play premium content. See Paywall Guide"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
Albaniansq
Arabicar
Chinesezh
Englishen
Frenchfr
Germande
Greekgr
Hebrewhe
Hungarianhu
Italianit
Japaneseja
Polishpl
Portuguesept
Romanianro
Russianru
Spanishes
Thaith
Turkishtr

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"
			data-site="your-site-id"
			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.