Installing Content Sync for Contentful

What is Content Sync?

💡 Content Sync brings new super-powers to CMS Preview. When content editors click Open Preview, Content Sync jumps into action and routes content editors to the correct URL. It also helps them understand the status of preview, so they know when it's ready and if anything went wrong.

Instructions

1. Update your Gatsby site to gatsby-source-contentful@5.14.1 or later push changes to Gatsby Cloud.
2. Make sure you're on the latest version of Gatsby core (gatsby@latest) as well as any other gatsby-* packages. (The latest Gatsby v3 or v4 versions will both work.)
3. Install the Gatsby Cloud app for Contentful or if you already have it installed navigate to it's settings under Manage → Apps from your Contentful dashboard.
4. Copy Content Sync and Preview Webhook from Site Settings in Gatsby Cloud and paste these into the Gatsby Cloud app for Contentful.
5. You're set up to use Content Sync! Visit a content entry, make some changes, and preview them with the purple "Open Preview" button.

Note

Gatsby tries to determine the correct page for each preview automatically. If you find you're taken to a page where your content exists but it's not the page you want to preview on, for example arriving on a blog listing page instead of an individual blog post page, you can add an ownerNodeId to calls of the createPage action in your Gatsby site. See docs here.