Documentation

How to Connect Hinto AI with Framer

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.

Part 1: Syncing Your Articles.

  1. In your Framer project, navigate to the CMS panel on the left sidebar.

  2. 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. Documentation image

  3. In the New Collection window that appears, enter 'Articles' as the name and click Create. This collection will store all your individual help articles. Documentation image

  4. To get your API key, navigate to the Hinto AI web app and open your project.

  5. Click the settings icon to open Project Settings and select API Keys from the side menu.

  6. Click the New API Key + button.

  7. Enter a descriptive name for your key (e.g., 'Framer Integration') and click Create API Key.

  8. Click the copy icon to copy the new API key to your clipboard.

  9. Return to Framer, paste the key into the API Key field, and click Continue. Documentation image

  10. In the Hinto Content Sync window, ensure the Content Type is set to Articles.

  11. (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).

  12. Click Import to begin syncing. Your Hinto AI articles will now appear in your 'Articles' collection in Framer.

Documentation image

Part 2: Syncing Your Folder Structure

Repeat the process to import your folder structure, which is essential for organizing your content and building navigation menus. 13. Click the + icon next to Collections and launch the Hinto AI plugin again. 14. Name this new collection 'Folders' and click Create. 15. Paste the same Hinto AI API key into the field and click Continue. 16. From the Content Type dropdown, select Folders. 17. Click Import. Your folder structure from Hinto AI will now be available in the 'Folders' collection.

Documentation image

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.