Introduction

You wanted to show and preview specific apps by embedding them in your website so that your website visitors see how an app will work.

This article outlines how to present/showcase your app(s) to your clients through your website

Prerequisites

You need access to edit your website's code.

Solution

You have two options:

you can embed the 'Preview Your App' functionality on your website (general preview) and have your users select which app's design and functionality they want to check by plugging in whichever appcode they wish.
you can embed the 'Preview Your App' functionality on your website just for one specific app (app-specific preview), so your users will right away access this specific app that you chose to showcase.

How-To Embed Preview Your App (General Preview):

1. Copy this embed code:

 <iframe style="background-color: transparent;" src="https://www.cdnstabletransit.com/preview/index.php" frameborder="0" allowtransparency="true" scrolling="no" width="320" height="568"></iframe>

2. Add it to your front-end site. You can adjust the height and width by replacing the values inside the quotation marks. Just make sure you maintain the same width:height ratio for optimum appearance.

3. Save your changes.

How-To Embed App-Specific Previewer (app-specific preview)

1. Take the code below and replace the “APPCODEHERE” with your app code:

<iframe style="background-color: transparent;" src="https://www.cdnstabletransit.com/preview/index.php?external=true&appCode=APPCODEHERE" frameborder="0" allowtransparency="true" scrolling="no" width="320" height="568"></iframe>

2. Take the code with the updated appcode of your preference and add it to your front-end website!

Important: In either of the above cases, note that you don't need to add this script to each page of the front-end site. It should be added in the homepage.

Back to the top