Skip to main content

Add the Gatsby Preview Extension to Contentful

 

Add the Gatsby Preview App to the Contentful Sidebar

Adding this app to the Contentful sidebar will make your preview edits update faster.

Prerequisites

The site must be set up with a Gatsby Preview instance. Please see “Getting Started with Gatsby Cloud and Contentful”.

Installing App

To install the sidebar extension in your Contentful space follow the steps below.

  1. Log in to your Contentful Dashboard

  2. From the “Apps” Menu, select “Manage Apps”. apps-menu.png

  3. Find “Gatsby Cloud” in the list of apps and select. contentful-apps.png

  4. A modal will open titled, “App details”, click install and you will be navigated to configure the app. app-details.png

  5. Authorize the Gatsby Cloud App to access your Contentful Space. app-permissions.png

  6. Fill in the input labeled “Site URL” with the URL of your Gatsby preview instance. You can find this on ‘/dashboard/sites’ or in the settings for the Preview instance.

  7. Fill in the input labeled “Webhook URL” with the webhook URL of your Gatsby preview instance. You can find this in the settings for the Preview instance. app-config.png

  8. (Optional) Fill in the input labeled “Authentication Token” with an authToken. This is necessary for Gatsby Preview instances that require the user to login before they can view the Preview.

  9. Select all content types where you’d like the Preview button to be available in the side bar. (This can be changed later from the Sidebar settings page for each content model).

  1. Click Install in the top right corner to finish configuring the app.

  2. Navigate to a piece of content within Contentful. The sidebar will be installed and displayed to the right. sidebar-app.png

You can navigate to the preview instance by clicking “Open preview”. Automatic updates are debounced 1000ms.

Related articles