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
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:
| Size | Browser Width | App Width |
| Full | 1265px + | 1076px |
| Large | 1264px - 952px | 1216px - 904px |
| Small | 951px - 344px | 895px - 288px |
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.