Otter Embed Codes

FRONT PAGE

Excerpt Link Slide-In

Put this in the Excerpt field, replacing CODE with the code from the shared Otter Note URL.
(uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

<a href="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true" rel="otter">LISTEN</a>

Note: to slide-in a page other than Otter, use rel=dd
(uses ddajaxsidepanel.min.js, div.ddajaxsidepanel, .ddajaxsidepanel .contentarea, and div.ddajaxsidepanel iframe)

Title/Image Pop-Up (full canvas) iFrame

Full canvas - the iFrame content covers the entirety of the popped-up page, with a Home button in the top left corner (also useful for embedding, popping up or sliding in from other sites.)

a.  In the editor, select the Otter Full Canvas Template (which only uses the empty {{#post}} {{/post}} as wrapper for the iFrame.
b.  In the Facebook Description, put (only) the Otter CODE.

Or... alternatively – put this HTML into the content of the post. This accomplishes the same as the above, but includes all of the default post elements which you can selectively include on the page along with the iFrame. (Also useful as a re-usable Snippet in the editor.)

(uses iframe.modal_iframe modal_iframe-on, div.otterpop, and div.otterpop iframe)

<div class="otterpop">
    <iframe src="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true"></iframe>
</div>
<style>
body.post-template article.post,
section.post,
.container-wrap-modal {
    padding: 0;
    margin:0
    }
.post-title,
.post-full-image,
.post-nav,
.post-meta--top,
.authors,
.aside,
.toc-details,
.group {
    display:none
    }
figure {
    margin: 0
    }
</style>

IN CONTENT

(uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

<div style="padding: 0 25%">
  <a href="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true" rel="otter">
    <h2 class="post-title" style="font-size: 1.2em">
        Listen >>
    </h2>

>> INSERT IMAGE CARD HERE <<

  </a>
</div>
<style>
.post-full-image {
    display: none
    }
.kg-image-card {
    margin: 0
    }
</style>

(uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

<a href="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true" rel="otter">Listen >></a>

Use this sparingly as it loads with the page and slows down the site.
(uses div.otterframe and div.otterframe iframe)

<div class="otterframe">
<iframe src="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true"></iframe>
</div>

The portable version (to embed Otter.ai posts in any other site) is this code (also useful as a re-usable Snippet in the editor):

<style>

div.otterframe iframe {
    height:30em;
    width:100%;
    border:0px none;
    margin:-57px 0 1.5em 0
    }
    
div.otterframe {
    overflow:hidden;
    border-radius:10px;
    background-color:#fff;
    width:30em;
    margin:auto;
    box-shadow: -1px 3px 15px -4px rgba(0,0,0,0.76)
    }
    
@media (max-width: 767px) {
    div.otterframe {
        width:100%;
        box-shadow:none
    }        
}

</style>
<div class="otterframe">
<iframe src="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true">
</iframe>
</div>