Connect your Hygraph project to Plasmic

Plasmic is visual no-code page builder and CMS for any website or codebase, which you can use your existing code components with.

#What you can do with the Hygraph-Plasmic integration

Integrate Hygraph with Plasmic to create websites using a no-code visual page builder where the content is populated by Hygraph.

This allows non-technical, non-developer users to build pages, without the need to rely on developer teams.

#Prerequisites to use this integration

• You must have a Hygraph account. If you don't have one, you can create one here.
• You must have a Hygraph project with at least one model.
• You must have a Plasmic account. If you don't have one yet, you can get one here.
• You must have a Plasmic project with a workspace set up. The Plasmic no-code quickstart contains detailed information on how to do this.

#Connect your projects

#Step 1: Add a PAT to your Hygraph project

Add a PAT to your Hygraph project

1. In your Hygraph project, go to Settings > Access > API access > Permanent Auth Token.
2. In the Permanent Auth Token section, click on +Add token to add a new token. Type in a Token name for it and, optionally, add a Description. Use the radio buttons to select a Default stage for content delivery.
3. Click on Add & configure permissions.
4. Look for the token you've just added in the Permanent Auth Tokens list. Click on the three dots context menu, and select the Edit option.
5. Initialize the default permisisons for the Content API and the Management API by clicking on the purple Initialize default permissions button in each of the two sections.

#Step 2: Install Hygraph in your Plasmic project

1. Click on the blue + button located at the top left corner of your Plasmic project.
2. Look for Hygraph using the search field.
3. Click on the Hygraph package to install it.
4. Click on Go to settings on the Project Settings popup that displays on the upper right corner of the screen to access the installed package, which contains the API URL and the Auth token.

#Step 3: Connect your projects

Add your Hygraph PAT and API IRL

1. In your project settings, select GraphCMS Credentials Provider.
   Our company has recently changed its name to Hygraph. Our name in Plasmic will soon be updated, but for now please note that it shows our old name.

2. Replace the API URL value in Plasmic with the Content API endpoint from your Hygraph project. You will find it by navigating to Settings > Access > API access > Endpoints > Content API in your Hygraph project.
3. Replace the Auth Token value in Plasmic with the value for the PAT you created in Hygraph for Step 1 of this tutorial. To copy the value, go to Settings > Access > API access > Permanent Auth Token in your Hygraph project and click on the copy icon.

Your projects are now connected.

#Use Plasmic with Hygraph

Now that your projects are connected, you will need to add a Fetcher and then a Field inside it.

To add them:

1. Click on the blue + icon at the top left corner of the screen, and type "GraphCMS" in the search field.
2. Drag and drop the GraphCMS Fetcher element from the search results, into the place in your project where you want to have it.
3. Set a query for the Fetcher element by clicking on unset next to Query on the right sidebar.
4. Type in your query in the playground, and run it to test that it works. Once you've tested it, click on Save.
5. Click on the GraphCMS Fetcher element on the template to display its settings on the right sidebar.
6. Click on unset next to Field to open the field selection screen.
7. A popup will show you all the fields that you set up in the query. Click on one to select it, then click on Save.

The selected content should be fetched and displayed on your frontend preview.

#Resources

• Plasmic documentation
• Plasmic no-code quickstart
• Visually build Hygraph pages with Plasmic