Building an Embedded App

What are Embedded Apps?

Embedded apps create an iframe that's visible in the app's Settings area ((under /manage/apps/{slug}). This allows you to customize what a user sees without having to leave the Thinkific site.

In this example "Manage product", "Customize checkout", "Orders", and "Payment settings" are pulled from a 3rd party app (named "App name") and displayed in an iframe. 

How do I set up an Embedded App?

To set up an Embedded App:

1. Ensure that Embedded Apps have been enabled for your app. (email apps@thinkific.com to request access)
2. View your app in the Partner Portal
3. Expand Settings and details
4. Under App slug ensure that the correct app slug is entered (you can view your app slug by viewing your app in /manage/apps, clicking “Settings”, then looking at the app’s URL)
5. Enable the Embed app toggle
6. Click Save app details

HTTPS

Thinkific uses HTTPS for all of its pages. Subsequently all embedded apps must also use HTTPS. Apps that don’t use HTTPS will cause mixed content restrictions errors. You can use tunneling software (such as ngrok) for local development to create an SSL tunnel to your localhost server.

Install Callback

On install callback, ensure that you redirect to the app details page within Thinkific (e.g. /manage/apps/{slug}#embedded-app)

Using the Client-side Library

When creating your embedded app we recommend using Thinkific’s look and feel to create a consistent experience for our users. We definitely would understand, however, if you’d prefer to use your own app’s branding.

An exception to this is when using toast notifications. When a user makes an update using an embedded app they expect to see Thinkific’s success and failure messages in the bottom-left corner, which is not accessible to an embedded app’s iframe.

NOTE: An embedded app must use toast notifications for success and error messages in order to be approved for the Thinkific App Store.

To use Thinkific’s toast notifications:

CDN installation

<script type="module">
  import { toast } from 'https://cdn.thinkific.com/assets/app-frames/remote/latest/index.js';
</script>

Local installation

npm install @thinkific/app-frames-remote

OR

yarn add @thinkific/app-frames-remote

APIs

Toast

/**
enum ToastVariant {
  ALERT = 'alert',
  INFO = 'info',
  NOTICE = 'notice',
  WARNING = 'warning',
}

interface ToastOptions {
  closable: boolean;
  duration: number;
  message: string;
  variant: ToastVariant;
}

interface ToastEvent {
  action: string;
  option: ToastOptions;
  sender: string;
}

receiver: 'https://{subdomain}.thinkific.com'
**/

import { toast } from '@thinkific/app-frames-remote';

toast(data: ToastEvent, receiver: string);

App Review

Embedded apps that do any of the following are prohibited and will be rejected during the app review process:

• Re-use our existing icons for navigation, menu items, or product descriptions
• Re-use our sidebar navigation style
• Reproduce native Thinkific product pages
• Emulate Thinkific styles for upgrade and/or promotional messages
• Employ dark patterns which may confuse our course creators

Also refer to our App Submission Guidelines for further guidance on submitting a high-quality app.