--- title: [Timeline] - Preview Content Across a Timeline description: Learn to navigate the Timeline feature effortlessly. Visualize future updates, compare versions, and ensure seamless website transitions. url: https://www.contentstack.com/docs/content-managers/timeline/preview-content-across-a-timeline product: Contentstack doc_type: documentation audience: - content-managers version: v1 last_updated: 2024-10-28 filename: preview-content-across-a-timeline.md --- # [Timeline] - Preview Content Across a Timeline This page explains [Timeline] - Preview Content Across a Timeline for Contentstack. It is intended for content managers who need to understand or implement this topic. Use it when you are setting up, configuring, or troubleshooting this feature. ## Preview Content Across a Timeline [Timeline](/docs/content-managers/timeline/about-timeline) allows you to see how your website will look at specific future dates and times. This feature helps you visualize the impact of scheduled content updates, ensuring everything appears as expected before going live. **Note**: You need to enable the live preview feature in your stack settings to be able to view and use the timeline feature. To view the timeline, log in to your [Contentstack account](https://www.contentstack.com/login), and perform the following steps: 1. Go to your [stack](/docs/developers/set-up-stack/about-stack) where you want to preview your website’s timeline. 2. In the left panel, click the "Visual Experience" icon. By default you would see the Timeline preview. **Note**: If you have not set up the default environment, the latest live preview SDK, and the preview token in the live preview settings, the Set Up Timeline screen will appear. This screen will guide you through each step to set up and use the timeline feature. 3. Click any of the dates visible in the timeline bar to view your website in any future timeline. 4. Select different **environments** and **locales** to see how your content will appear in various settings. Navigate through different pages of your website to see how the scheduled content appears. ### Add Dates to Timeline You can also add dates to the timeline bar. 1. Click the **Add Preview** button to add dates to the timeline bar. 2. In the resulting timeline dropdown, select from scheduled publishes or releases. 3. Alternatively, click **Select Custom Date** to add a custom date to your timeline for preview. ![Add-Dates-to-Timeline.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt08dce63f59432834/670670d4baa031ba0933a59c/Add-Dates-to-Timeline.gif) ### URL Navigation You can toggle between the “Timeline” and the “URL Navigation” modes. In the “URL Navigation” mode, you can preview your website using the URL bar, making it simple to navigate across different URLs. ![URL-Navigation.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt41ef457ce1602cf7/670670d416b39a156e5e02e1/URL-Navigation.gif) ### Preview Details You can view the items, i.e., entries and/or assets, that have been updated for a particular timeline. 1. Hover over a date in the timeline bar and click the **Preview Details** icon to view items updated for a particular timeline. 2. For scheduled publishes, you will see the entry or asset scheduled for publishing. 3. For releases, you will see a list of entries and assets present in the release. 4. The left panel displays the **Publish Timeline**, providing an overview of all publishing schedules. 5. For entries, click the “vertical ellipsis” in the **Actions** column and select **Compare Entry** to compare the entry in different versions. 6. Use **Open link in new tab** to open the entries or assets in a new tab. ![Preview-Details.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltc0e7ed1e05dfa367/670670d2abed03f135d709e0/Preview-Details.gif) ### Compare Website You can also compare your website in two different timelines. 1. Hover over a date for comparison and click the **Compare Website** icon to open a side-by-side comparison of your website in the current timeline and the selected date. 2. Use the **Highlight Differences** option to see all differences between the two pages. **Note**: You can [customize the color options](/docs/developers/set-up-timeline/set-up-timeline-for-your-website#customize-color-options-for-highlight-differences-feature) for the highlight differences functionality. 3. Preview the website in different views (Responsive, Desktop, Tablet, or Mobile) or manually set the width and height. 4. Change the orientation of the website as needed. 5. Alternatively, compare websites in different timelines from the **Preview Details** page. ![Compare-Website.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt6756fdc3045f8dcf/670670d2d8ac33ed7f5c7b7c/Compare-Website.gif) You can choose to compare your website in different timelines thus giving you complete control. ### Remove Preview Hover over any date in the timeline bar and click the **Remove Preview** icon to customize your timeline view. ![Remove-Preview.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt8dbbb8c1c444bea7/670670d22273f253eeb4cb6b/Remove-Preview.gif) ### Update Timeline By default, the timeline bar shows the farthest scheduled date as the end of the timeline. To update the end date, hover over the date on the extreme right and click the **Update Timeline** icon. Select any scheduled publish or release from the pop-up to update your timeline. ![Update-Timeline.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt2ceef07c9d1a5703/670670d14911a519cfa88df5/Update-Timeline.gif) ### Releases When viewing a particular release, use the **Preview** button to preview the website for that specific release. ![Releases.gif](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blta83ecf7afd870283/670670d156cc1181feb07c61/Releases.gif) **Additional Resource**: You can preview a particular entry with or without scheduling it for publishing. Refer to the [Preview Entry](/docs/content-managers/author-content/preview-entry/) document for more information. Use the timeline feature to navigate through your website as a visitor would. Check all pages, links, and content elements to ensure they appear correctly. Pay attention to the layout, design, and functionality to confirm everything works as intended. By following these steps, you can ensure that your website will look perfect when future updates go live, providing a seamless and engaging experience for your audience. ## Common questions ### What is covered in [Timeline] - Preview Content Across a Timeline? This page covers the topic described in the title and provides the steps, options, and examples needed to use it. ### Who should read [Timeline] - Preview Content Across a Timeline? Anyone responsible for configuring, implementing, or maintaining this capability should use this page as a reference. ### When should I use this page? Use it when you are setting up this feature, troubleshooting issues, or validating expected behavior.