Search
⌃K
Links

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?
The player will only render on a page if:
  • There is an audio version of the page available (according to metadata)
  • The audio is processed​
  • The audio is published​
What happens if I edit my audio?
The player will always stream the latest version of the audio (once fully processed). If you are still seeing the old version, you may need to clear your cache.
Can I customize the player?
Yes, you can customize the Small Player used by the AMP script.
Alternatively, you can build a custom player using our JavaScript SDK.