Test & Activate apps

Embed your App

Updated: October 20, 2020

Embedding refers to placing a piece of media within your website instead of linking back to the media's original source. Embedding an App on your website means that your users are not required to leave your site in order to use your apps.

To embed your App, all you need is a code snippet (provided below). You enter this code snippet on the same platform where you built your website. The exact procedure for adding a code snippet varies depending on the underlying platform, but it's typically quite easy.

Example embed
You must use a custom App URL
Some mobile devices (specifically, iphones) will not recognize your embedded App unless the App is hosted on a subdomain of the website you want to embed it on.
For example, if you want to embed your App on www.washingtonlawhelp.org, you must host your App on the subdomain app.washingtonlawhelp.org.

Types of embed

There are two types of embed possible for your Afterpattern Apps:

  1. Standard
  2. Lightbox: Creates a button on your website which fires the App in a "lightbox" (aka modal).

Standard code snippet

<iframe width="500px" height="700px" frameborder="0" src="PASTE_SHAREABLE_LINK_HERE"></iframe>

Make sure to paste your App's shareable link in the code snippet where it says "PASTE_SHAREABLE_LINK_HERE" (paste the shareable link within the quotes).

You can adjust the width and height. Note, as with all embeds, only the width can be responsive (e.g. 100%); height must be a specific value (choose a height you think works best for the average size of your Blocks).

You can find instructions for creating a lightbox embed under in the App Builder under Settings > Embed:

On this page

Hire an Afterpattern expert

Go from idea to launch in weeks.

View services