Embeds

Arcades can be embedded inside anything that supports iframes. Here, we cover embedding basics and sample instructions for specific sites.

If you want to learn more about a particular platform, feel free to jump down to the specific section:

Webflow / Wordpress / Zendesk / Beamer / Jira & Confluence / Gitbook / Notion / Intercom / Tettra / ClickUp

If you have a question about a particular website or service you don't see below, reach out!


Special Codes

Can I embed a popup Arcade?

Sure! Use this code:

<div class="custom-popup receipt-capture-demo d-flex justify-content-center align-items-center position-fixed start-0 top-0 w-100 h-100">
<div class="popup-wrapper overflow-hidden position-relative">
<div class="popup-content">
<div style="position: relative; padding-bottom: calc(216.793893129771% + 41px); height: 0; width: 100%;"><iframe data-src="https://demo.arcade.software/oOXZioRySmHEREjXNUg1?embed&show_copy_link=true" title="Receipt Capture Demo" frameborder="0" loading="lazy" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="clipboard-write" style="position: absolute; top: 0; left: 0; width: 70%; height: 70%;color-scheme: light;" src="https://demo.arcade.software/oOXZioRySmHEREjXNUg1?embed&show_copy_link=true" class="lazyloaded" data-load-mode="1"></iframe></div> </div>
<div class="popup-close rounded-circle d-flex justify-content-center align-items-center position-absolute">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>

Embed Codes

Where do I find Embed options?

After you are done editing your Arcade, click on the “Share” button and choose which channel you want to showcase your demo on.


Emails

Can I embed my Arcade in an email?

Email providers do not support embedding.

However, if the recipient is using Superhuman, Outlook, or Gmail and has the Arcade extension installed, Arcades can expand and be interactive within your emails.

Reminder: This will only work if your recipient has the Arcade extension installed. If they don't have the extension installed, the Arcade link will not become interactive. In that case, we recommend you use a GIF or video download of your Arcade.

Here's what Arcades will look like in an email:


See below for a list of platforms that support the use of embedded Arcades

*This is not an exhaustive list.

Webflow

  • Inside Webflow, go to the HTML block. ⚠️ You will need to upgrade to get this feature.

  • Enter your Arcade snippet inside the block, and then publish.

Here’s an Arcade that walks through this:

Webflow CMS: If you're embedding within the CMS, you'll need a new different steps.


Wordpress

In Wordpress, start typing HTML and then paste in the snippet. Click on Preview and then click Update.

Sometimes Arcades have an issue if you have not updated your Wordpress cache. If you are having issues seeing your Arcade, clear your CDN and local cache.


Zendesk

First, ensure that your settings allow iframes. Here’s how you set that up:

Then use the HTML bar within the help desk article:


Beamer

Inside the article, enter “Insert Embedded Content” and then enter the Arcade snippet HTML.


Jira & Confluence


Gitbook

Gitbook supports Arcades as embeds. In order to do that, you can do ⌘/ inside Gitbook, and then you'll see the Embed option.

Here's the most meta Arcade of all time...


Notion

To embed an Arcade in Notion, it's as simple as pasting in the public Arcade link and then choosing the "Create embed" menu item:


Intercom

Intercom, unfortunately, does not support iframes. You can include links to Arcades within your Intercom chat or articles, but they won't expand within Intercom.


ClickUp

To embed an Arcade in ClickUp, type /embed and paste in the Arcade website code.


Tettra

To embed an Arcade in Tettra, choose Embed and then paste the shareable link.

Framer

To embed an Arcade in Framer, use the embed control.

Articulate

To embed an Arcade in Articulate, use the Embed Multimedia block.

Last updated