AMP iFrame
Set up automatic embedding on AMP.
This guide explains how to set up automatic embedding on AMP.
You will need to add the AMP-specific embed code into your article template:
<amp-iframe
width="295" height="43"
sandbox="allow-scripts allow-same-origin allow-popups"
layout="responsive" scrolling="no" frameborder="0"
src="https://spkt.io/amp/{project_id}?podcast_id={podcast_id}">
<amp-img
width="643" height="150"
layout="responsive" placeholder
src="https://s3-eu-west-1.amazonaws.com/speechkit-js/logo.svg"></amp-img>
</amp-iframe>
You will need to replace project_id with your own Project ID and pass one of the following parameters: podcast_id | external_id | article_url.
You can open this example in the AMP Playground.
The player does not render when audio is unavailable. However, due to AMP restrictions, we cannot hide an amp-iframe (as we do normally) when audio is unavailable. To solve this you will need to add a function checker to show/hide the amp-frame and this must be added on your side due to the restrictions.
The function needs to make a request to our API and to check whether the audio exists or not. You can then show/hide the iFrame depending on the response. The following snippet will give you the request URL:
[https://app.speechkit.io/api/v2/projects/{project_id}/podcasts/search?url={article_url}](https://app.speechkit.io/api/v2/projects/%7Bproject_id%7D/podcasts/search?url=%7Barticle_url%7D)
curl -X GET "https://app.speechkit.io/api/v2/projects/{project_id}/podcasts/search?url={article_url} \
-H "Accept: application/json"
When you make a request using sRequestUrl, it will return a 200 JSON response for an existing audio article, or a 404 Not Found response for an article that can't be found. You can then show/hide the iFrame according to this response.
Response
Meaning
🟢 200: OK
Audio exists
🔴 404: Not Found
Audio cannot be found

FAQs

When will the player appear?
What happens if I edit my audio?
Can I customize the player?
Copy link