Embedding Apps on Websites

🚧

Embeds to be deprecated August 2023

It is now recommended to use the Web SDK to embed apps (CXR 18.1+) into other sites as Airkit embeds are no longer supported.

This article will cover the basics of creating a simple embed for your app. This article requires a published app and will use a simple Lead Capture example app.

Creating the Embed in Console

Go to Console, select the Resources tab. Select the Embeds section. Click the New Button. Give the Embed a name. Embeds only work with deployed apps. Learn about publishing an app here. Select a deployed app from the App dropdown menu. Select the deployment from the Deployment dropdown.

In order to display the app on a page, a target hostname is required. For the purposes of the example, include three: http://, https://, and file://. This will allow for testing locally and the embed to be served on both a http and https provided resource.  

Select the checkboxes for "Use Launcher", "Show Launcher on Load", and "Show Frame on load." This will display both the icon and the app when the page loads. In the styles box, scroll down to buttonImage, and insert a valid image URL for the "src" value. Click Create.

Click on the icon under Embed script to copy the HTML to display the embed. Paste the copied code into a web page. Open the page in a browser. The embed will be displayed on the first rendering of the page.

The embed on this page is launching a simple lead capture. When the embed launches it creates a new session for the user. Each time the page is loaded the web launch trigger is hit and the app starts a session.

To delay the display of the lead capture to allow the user to see the page first, set the value of "Show Frame on Load After Duration" to "5000." This is in milliseconds so this means the frame will now be rendered in 5 seconds. Click Update. Go back to the resource where the embed is located and refresh.

Show Frame on Load After Duration is just one of many configurable properties on Embeds. Check out Airkit Embeds: AirClient Configurable Properties for a full list of the properties that can be configured on an Embed.