Captivate clickable timestamps make it easier for your listeners to navigate your audio in a single click and are super easy to add to your show notes.
If you use a Captivate Site or our Captivate Sync WordPress plugin clickable timestamps will automatically update. Yay! If you have your own custom website, no problem, all you need to do is add some custom code to your website.
To enable clickable timestamps on your custom website you need to add the following code to the header of your website.
This code includes the Captivate Player API and the Captivate Timestamps script, and it's super important that both of these are included in the right order.
<head>
<!-- Your other head tag scripts here -->
<!-- Captivate Clickable Timestamps -->
<script src="https://assets.captivate.fm/player/api.min.js"></script>
<script src="https://assets.captivate.fm/player/captivate-timestamps.min.js"></script>
</head>
The timestamps will only work on single pages where you have one episode and one section of show notes matching this player.
To enable the timestamps on your page you need to simply add the following class cp-show-notes to the container of your show notes as per the below example.
<div class="cp-show-notes">
<p>Links to this weeks stories and discussions:</p>
<p>[01:10] - Talking about how awesome Captivate is.</p>
<p>[05:50] - Finishing up an explanation of how the Captivzate timestamps work.</p>
</div>
One thing that is very important is that the allow="autoplay tag is enabled on your iFrame like so. This ensures that if a user isn't playing your episode already - if they hit the timestamp it will automatically play without them needing to interact with your player 😄
<div style="width: 100%; height: 170px; margin-bottom: 20px; border-radius: 10px; overflow: hidden;"><iframe style="width: 100%; height: 170px;" frameborder="no" scrolling="no" allow="autoplay" seamless src="https://player.captivate.fm/episode/1985dbf1-bb17-4e3c-86fd-81d2eb39638d"></iframe></div>
That's it! 👍
When you have added the code to your custom website you're all set to start creating clickable timestamps, whoop!