AMP iFrame
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 |
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.
Last modified 10mo ago