| 1 |
<div class="tab-content"> |
| 2 |
<h3>Embed codes</h3> |
| 3 |
<p class="embed-intro"> |
| 4 |
Copy these snippets to embed this item on your website, blog, or portfolio. |
| 5 |
</p> |
| 6 |
|
| 7 |
{% if !item.is_free && item.can_access %} |
| 8 |
{% else %} |
| 9 |
{% endif %} |
| 10 |
|
| 11 |
|
| 12 |
<div class="embed-option"> |
| 13 |
<h4>Buy Button</h4> |
| 14 |
<p class="embed-option-desc">Minimal strip with title, price, and buy button. 300x60px.</p> |
| 15 |
<div class="embed-preview"> |
| 16 |
<iframe src="{{ host_url }}/embed/i/{{ item.id }}/button" width="300" height="60" frameborder="0" class="embed-iframe"></iframe> |
| 17 |
</div> |
| 18 |
<div class="embed-code-row"> |
| 19 |
<code class="embed-snippet"><iframe src="{{ host_url }}/embed/i/{{ item.id }}/button" width="300" height="60" frameborder="0" title="Buy {{ item.title }} on Makenot.work"></iframe></code> |
| 20 |
<button class="copy-btn" data-action="copyEmbedBtn">Copy</button> |
| 21 |
</div> |
| 22 |
</div> |
| 23 |
|
| 24 |
|
| 25 |
<div class="embed-option"> |
| 26 |
<h4>Product Card</h4> |
| 27 |
<p class="embed-option-desc">Rich card with cover art, description, and buy button.</p> |
| 28 |
<div class="embed-layout-toggle"> |
| 29 |
<label><input type="radio" name="card-layout" value="vertical" checked data-change="switchCardLayout" data-arg="vertical"> Vertical (350x400)</label> |
| 30 |
<label><input type="radio" name="card-layout" value="horizontal" data-change="switchCardLayout" data-arg="horizontal"> Horizontal (600x200)</label> |
| 31 |
</div> |
| 32 |
<div class="embed-preview"> |
| 33 |
<iframe id="card-preview" src="{{ host_url }}/embed/i/{{ item.id }}/card" width="350" height="400" frameborder="0" class="embed-iframe"></iframe> |
| 34 |
</div> |
| 35 |
<div class="embed-code-row"> |
| 36 |
<code id="card-code" class="embed-snippet"><iframe src="{{ host_url }}/embed/i/{{ item.id }}/card" width="350" height="400" frameborder="0" title="{{ item.title }} on Makenot.work"></iframe></code> |
| 37 |
<button class="copy-btn" data-action="copyEmbedBtn">Copy</button> |
| 38 |
</div> |
| 39 |
</div> |
| 40 |
|
| 41 |
{% if is_audio %} |
| 42 |
|
| 43 |
<div class="embed-option"> |
| 44 |
<h4>Audio Player</h4> |
| 45 |
<p class="embed-option-desc">Preview player with cover art, playback controls, and buy button. 350x120px.</p> |
| 46 |
<div class="embed-preview"> |
| 47 |
<iframe src="{{ host_url }}/embed/i/{{ item.id }}/player" width="350" height="120" frameborder="0" class="embed-iframe"></iframe> |
| 48 |
</div> |
| 49 |
<div class="embed-code-row"> |
| 50 |
<code class="embed-snippet"><iframe src="{{ host_url }}/embed/i/{{ item.id }}/player" width="350" height="120" frameborder="0" title="Preview {{ item.title }} on Makenot.work"></iframe></code> |
| 51 |
<button class="copy-btn" data-action="copyEmbedBtn">Copy</button> |
| 52 |
</div> |
| 53 |
</div> |
| 54 |
{% endif %} |
| 55 |
|
| 56 |
|
| 57 |
<div class="embed-option"> |
| 58 |
<h4>Direct Purchase Link</h4> |
| 59 |
<p class="embed-option-desc">Focused purchase page, no navigation chrome. For link-in-bio, social media, newsletters.</p> |
| 60 |
<div class="embed-code-row"> |
| 61 |
<code class="embed-snippet">{{ host_url }}/buy/{{ item.id }}</code> |
| 62 |
<button class="copy-btn" data-action="copyEmbedBtn">Copy</button> |
| 63 |
</div> |
| 64 |
</div> |
| 65 |
</div> |
| 66 |
|
| 67 |
<div id="tab-item-embed-cfg" hidden data-host-url="{{ host_url }}" data-item-id="{{ item.id }}" data-item-title="{{ item.title }}"></div> |
| 68 |
<script src="/static/tab-item-embed.js?v=0623"></script> |
| 69 |
|