What design guidelines should I follow when creating embedded apps?

Embedded apps present a unique opportunity to create a seamless experience between Thinkific's user interface and your app. We suggest the following design guidelines if you choose this route. Apps that deviate from these best practices may be denied during the app review process.

In this article

• The App Frame
• Responsive Resizing
• App Navigation
• Examples

For more information on embedded apps, see here: Building an Embedded App

The App Frame

Users should be aware that they are interacting with an embedded app experience. When the user views the app detail page we display a header that shows:

• A link back to /manage/apps
• The app name and logo
• A link to view the app's details (as specified when creating your app)

The app container has a #CACCD6, 1px border and the Thinkific Help button is removed (to reduce the likelihood that course creators use the wrong channel of support for your app). We recommend that you include a link to your support resources within your embedded view.

Responsive Resizing

Embedded apps must fit within the specified content area of Thinkific admin pages. The main content area for our pages is set at a max width of 1076px. Thinkific uses the following breakpoint widths:

We do not currently support embedded app frames that go full screen. If your app experience is better suited for a full screen view, open your app in an external URL. Similarly, if your app is not responsive to smaller screens, display a message to the user that the app is best experienced on larger size screens.

App Navigation

Embedded apps are placed within an iFrame of the app's native subview. Due to their embedded location they will be in close visual proximity to the Thinkific admin’s native navigation sidebar.

We recommend that you use:

• Tertiary navigation patterns to avoid visual confusion with the Thinkific sidebar
• Tabs, tertiary links, or dropdowns as this matches our design patterns
• External links where appropriate to link to content best viewed at full size

Examples

Tabs

Dropdowns

Lightweight Sidebar

App Branding & Design

At this time, we do not have any restrictions on the design system that you choose to use to construct your views, though we encourage copying our Thinkific conventions for admin styling and interaction patterns such as buttons, tabs, dropdowns, pickers, calendar, range selectors, tables, pagination, etc. to reduce our users’ learning curve. Please reference usage of these components in the Thinkific admin interface.