Set Up the HTML iframe Embed code

1. Copy this HMTL iframe embed code:

   <iframe src=”https://otter.ai/shared/conversation/LINKHERE?noGapBottom=true&scrolling=true” width=”100%” height=”600px” frameborder=”0″ style=”box-shadow: -1px 3px 28px -4px rgba(0,0,0,0.76);”></iframe>

2. Edit the Canvas page where you want to embed the Otter interactive transcript
3. Click your cursor where you want the embed to go
4. Click the Insert/Edit Media button in the Canvas editor
   
5. Click the Embed tab
   
   
6. Paste the HTML iframe embed code (Step 1 above) into the box, but do not click OK (yet!)

Get the Link from Otter.ai

1. Open another browser window and go to http://otter.ai
2. Go to My Conversations in otter.ai and open the transcript for your audio
3. Click the Share button (+ person icon at top right)
4. Click Create a Link
5. Click Copy Link and paste the link somewhere you can edit it
6. The otter link will look like this:
   https://otter.ai/s/1HITxRb9SvKq2XqQ5l39_Q
7. Copy the part of the link after /s/ (the part in bold above, though yours will be different)

Add the link to your HTML iframe Embed Code

1. Go back to the Canvas page where you are embedding the audio
2. Replace the text in the iframe embed code that says “LINKHERE” with the code you copied from Otter.ai (be sure you do not use the entire link from Otter.ai, only the part of the code after the /s/ shown in bold above)
3. Click OK on the Insert/Edit Media box.

Your embedded Otter.ai interactive audio transcript should look like this: