# Embeds

{% hint style="info" %}
Are you looking for a way to embed forms in your Arcade? See the [Integrations page](https://docs.arcade.software/kb/leverage/integrations)! This Embeds page is about embedding your Arcade on another site or tool.
{% endhint %}

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

[Webflow ](#webflow) /  [Wordpress](#wordpress) / [Zendesk](#zendesk) / [Beamer](#beamer) / [Jira & Confluence](#jira-and-confluence) / [Gitbook](#gitbook) / [Notion](#notion) / [Intercom](#intercom) / [Tettra](#tettra) / [ClickUp](#clickup) / [Articulate](#articulate)

**If you have a question about a particular website or service you don't see below,** [**reach out**](mailto:support@arcade.software)**!**&#x20;

***

## Embedding Arcades

### What’s the best way to share my Arcade?

*Embedding your Arcade on your website is the most seamless way to share it.*\
To start, click the blue *Share* button in the top-right corner of any Arcade. You'll see several options, including:

* *Public link*
* *Team member sharing*
* *Export as GIF or video*
* *Step-by-Step Guide*
* *Socials*
* *Website embed (Get code)* ← This is what you’ll want to select for embedding.

***

### Where do I find the embed code?

1. Click *Share* on your Arcade
2. Select *Get code* under the *Website* option
3. A new window will appear showing your embed preview and options
4. Choose either *HTML* or *React* at the bottom
5. Click *Copy code* to grab the iframe

*You can paste this code anywhere that accepts iframes — like CMS platforms, blogs, or landing pages.*

{% @arcade/embed flowId="wdQ1LccMH6KrwcBz7mKl" url="<https://demo.arcade.software/share/wdQ1LccMH6KrwcBz7mKl?embed=>" %}

***

### What display options are available for embedded Arcades?

You can control how your Arcade displays on both *desktop* and *mobile*. There are three options available for each:

* **Inline (recommended):**\
  The Arcade will appear directly on the page where you place it — no clicks needed to play.
* **Popout Tab:**\
  When clicked, the Arcade opens in a *new tab* where it plays full-screen.\
  After clicking *Done*, the viewer returns to your site.
* **Popout Modal (advanced):**\
  When clicked, the Arcade opens as a *full-screen modal overlay* on your website.\
  This requires a small inline script in addition to the iframe.

You’ll see a real-time preview of your embed as you change these settings.\
Use the toggle at the top of the embed preview to switch between *desktop* and *mobile* views.

\[Insert Screenshot: Display setting panel with preview]

***

### Can I customize the style of the embed?

Yes. You can:

* Choose to *remove rounded corners* using the toggle
* Choose between *HTML* and *React* output
* Adjust styling manually in your own code (if desired)

For more advanced styling or custom integrations, reach out to our support team.

***

## Emails

### Can I embed my Arcade in an email?&#x20;

Email providers **do not** support embedding.&#x20;

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.&#x20;

{% hint style="warning" %}
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.
{% endhint %}

**Here's what Arcades will look like in an email:**&#x20;

{% @arcade/embed flowId="tK2rREVOsNRpGH0nCNkp" url="<https://app.arcade.software/share/tK2rREVOsNRpGH0nCNkp>" %}

***

## [Supported Platforms](#user-content-fn-1)[^1]

See below for a list of platforms that support the use of embedded Arcades&#x20;

*\*This is not an exhaustive list.*&#x20;

### 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:**

{% embed url="<https://demo.arcade.software/O9SdNSwLcVFp6K78G3cs?embed=&test=123>" %}

**Webflow CMS:** If you're embedding within the CMS, you'll need a new different steps.&#x20;

{% @arcade/embed flowId="MXQOSreBHj3kmAWbaazS" url="<https://app.arcade.software/share/MXQOSreBHj3kmAWbaazS>" %}

***

### Wordpress

In Wordpress, start typing `HTML` and then paste in the snippet. Click on `Preview` and then click `Update`.&#x20;

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.

{% embed url="<https://demo.arcade.software/qU4dYmxqKNX22WpJEf1I?embed=>" %}

***

### Zendesk

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

{% embed url="<https://demo.arcade.software/2owItorP6VMO5prFOWsf?embed=>" %}

Then use the HTML bar within the help desk article:

{% embed url="<https://demo.arcade.software/zDOtGt08oqMaBMP0XCwF?embed=>" %}

***

### Beamer

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

{% embed url="<https://demo.arcade.software/6AwasHM9NGwfrZHVWS6n?embed=>" %}

***

### Jira & Confluence

{% embed url="<https://demo.arcade.software/20USoxPJjnPOECg4jTZz?embed=>" %}

***

### 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...

{% embed url="<https://demo.arcade.software/sMQBCBY6MlpixHX1RsdW?embed=>" %}

***

### G2

To embed in G2, you'll want to paste the full URL found in the Embed code block.&#x20;

{% @arcade/embed flowId="OrRcWxtNpexvOgtgbJqO" url="<https://app.arcade.software/share/OrRcWxtNpexvOgtgbJqO>" %}

### 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:

{% embed url="<https://demo.arcade.software/WVN0QXvlT8P4oXtxpmYf?1=2>" %}

***

### Intercom

To embed in an Intercom article all you need to do is paste the share link in their video section.&#x20;

{% @arcade/embed flowId="bnAaQmXSx1FCT2V8Csuw" url="<https://app.arcade.software/share/bnAaQmXSx1FCT2V8Csuw>" %}

*A note from the Intercom team on spacing:*

When you add an embed to a help center article, the published version applies additional spacing (34px margin) above and below the embed to ensure proper visual separation between content elements.

The editor preview uses slightly different CSS styling, which is why the spacing doesn't match exactly.

This is currently expected behavior in our system. The additional spacing helps ensure content remains readable and properly formatted across different screen sizes.

***

### ClickUp

To embed an Arcade in ClickUp, type `/embed` and paste in the Arcade website code.&#x20;

{% embed url="<https://demo.arcade.software/CmIj2BKZKLD7RJB8Pctp?embed=>" %}

***

### Tettra

To embed an Arcade in Tettra, choose `Embed` and then paste the shareable link.&#x20;

{% embed url="<https://demo.arcade.software/SVbFf6rXhh8ZOd4Z3DAN?embed=>" %}

### Framer

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

{% @arcade/embed flowId="ZTwh4wj5QfW6p78PmUUj" url="<https://app.arcade.software/share/ZTwh4wj5QfW6p78PmUUj>" %}

### Articulate

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

{% @arcade/embed flowId="DpbaM2uy47aeqvneWoq6" url="<https://app.arcade.software/share/DpbaM2uy47aeqvneWoq6>" %}

### Evolve LMS

In Evolve LML, you'll need to slightly adjust the embed code to allow fullscreen and stretch to full capacity. You can use the adjusted code below:&#x20;

```html
<iframe      src="INSERT YOUR ARCADE LINK HERE"      style="width: 100vw; max-width: 100%; height: calc(100vw * 0.5625); max-height: 100vh; border: 0; margin: 0; padding: 0; display: block;"      allowfullscreen      allow="fullscreen"      loading="lazy"      title="INSERT YOUR TITLE HERE"> </iframe>
```

[^1]:
