cs-icon.svg

Live Preview Onboarding and Troubleshooting Guide

The Live Preview Onboarding Experience is a structured, interactive guide designed to streamline the integration of Live Preview into your website. It simplifies setup, resolves common configuration issues, and ensures real-time content updates function smoothly.

Setting up Live Preview can be challenging, especially when dealing with multiple environments, complex caching layers, or restricted access settings. The onboarding experience simplifies this with guided steps tailored for different website architectures. Whether you are a developer or a content creator, this feature ensures that your real-time content changes are accurately reflected without unnecessary technical roadblocks.

Key Benefits

  • Effortless Integration: Step-by-step guidance simplifies the Live Preview setup.
  • Immediate Issue Resolution: Real-time feedback helps identify and fix setup errors instantly.
  • Optimized Productivity: Minimize troubleshooting time and focus on content creation.
  • Adaptive Implementation: Works seamlessly with diverse website architectures and environments.
  • Comprehensive Support: Access relevant documentation, FAQs, and support within the onboarding interface.

Troubleshooting Errors

If the Live Preview Onboarding UI displays errors, the setup may be incomplete or misconfigured. Below are common errors, their causes, and resolutions.

Error

Possible Causes

Resolution

Could Not Connect to Website

  • Incorrect environment or base URL in the Live Preview settings.
  • Website restrictions due to CORS policy or X-Frame-Options settings.
  • Verify that the correct environment and base URL are selected in Live Preview settings.
  • Check if a CORS policy or X-Frame-Options is blocking access. Add https://*.contentstack.com as an allowed origin in your CORS policy.

Live Preview SDK Not Initialized

  • The SDK is not properly initialized on the client side.
  • If using a post message instead of the SDK, the website did not send the init post message correctly.
  • Ensure the Live Preview SDK is correctly initialized on the client side. Refer to the Live Preview SDK setup guide for implementation details.
  • If using post messages, verify that the website sends the init post message with all required details. Refer to the Live Preview SDK documentation.

Outdated Live Preview SDK Version

  • The Live Preview SDK version in use is outdated.
  • Update your Live Preview SDK to the latest version to ensure compatibility and access to new features.
  • If you are using a post message instead of the Live Preview SDK, set the sdkVersion value to 1.4.5 in your init post message configuration. Refer to the Live Preview SDK document for more details.

Preview Service Not Enabled

  • The Preview service is not utilized to fetch Live Preview data.

Default Environment Not Set

  • The default environment for Live Preview is not configured.
  • Configure the default environment by following the Live Preview setup document. Verify that you have the required permissions to modify environment settings. Check your user role settings in the Contentstack dashboard.
Was this article helpful?

More articles in "Work with Live Preview"

About Live Preview

Learn more

How Live Preview Works

Learn more

How Live Preview Works with SDK

Learn more

Set Up Live Preview for your Website

Learn more

Set Up Live Preview for your Stack

Learn more

Get Started with Live Preview Utils SDK V2.0

Learn more

Get Started with Live Preview Utils SDK V3.0

Learn more

Migrate to Preview Service

Learn more
^