This guide explains how to connect your Hinto AI knowledge base with Framer. By following these steps, you can seamlessly import your documentation, including articles and folders, directly into Framer's CMS. This allows you to build a fully functional, dynamic help center on your Framer site. You will need active accounts for both Hinto AI and Framer.
In your Framer project, navigate to the CMS panel on the left sidebar.
Open the command palette by pressing Cmd/Ctrl + K or click the plugin icon at the bottom of the canvas. Search for Hinto AI and select it to launch the plugin.
In the New Collection window that appears, enter 'Articles' as the name and click Create. This collection will store all your individual help articles.
To get your API key, navigate to the Hinto AI web app and open your project.
Click the settings icon to open Project Settings and select API Keys from the side menu.
Click the New API Key + button.
Enter a descriptive name for your key (e.g., 'Framer Integration') and click Create API Key.
Click the copy icon to copy the new API key to your clipboard.
Return to Framer, paste the key into the API Key field, and click Continue.
In the Hinto Content Sync window, ensure the Content Type is set to Articles.
(Optional) For internal links to function correctly, expand Advanced Settings and enter your site’s full base URL path where articles will live (e.g., https://yourdomain.com/docs).
Click Import to begin syncing. Your Hinto AI articles will now appear in your 'Articles' collection in Framer.
Repeat the process to import your folder structure, which is essential for organizing your content and building navigation menus.
You have successfully imported your Hinto AI articles and folders into Framer. You can now use these two CMS collections to build your documentation pages, create navigation menus, and design your help center.