# Basic implementation

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/implementing-live-preview/untitled |
| **course_slug** | implementing-live-preview |
| **lesson_slug** | untitled |
| **markdown_file_url** | /academy/md/courses/implementing-live-preview/untitled.md |
| **generated_at** | 2026-04-28T06:55:45.014Z |

> Part of **[Implementing Live Preview](https://www.contentstack.com/academy/courses/implementing-live-preview)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"03","type":"text","duration_minutes":3,"topics":["Basic","implementation"]} -->

#### Lesson text

### **How to enable Live preview on your Stack?**

1.  Under stack settings, go to Live Preview, tick enable live preview and select a Default Preview [Environment](https://www.contentstack.com/docs/developers/set-up-environments/about-environments).  
    ![ImplementingLivePreview\_L3\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83eed7e9d24e0d53/67e1ad0029f30c277bf8de60/ImplementingLivePreview_L3_img-1.png)  
    
2.  Go to Environment settings and add the base URL (hosted website URL) in that environment’s settings.This hosted website should be fetching data from the same environment.  
    ![ImplementingLivePreview\_L3\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd7f06a9a55b96fc3/67e1ad4db9f9a66e76dc40cf/ImplementingLivePreview_L3_img-2.png)

### **Generate Preview Token for you stack**

1.  Under stack settings, go to [tokens](https://www.contentstack.com/docs/developers/create-tokens/types-of-tokens).
2.  Under [Delivery Token](https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens), create a new token.  
    ![ImplementingLivePreview\_L3\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt17620102d7b0b49e/67e1adc3c0d1f26cc60a3d03/ImplementingLivePreview_L3_img-3.png)  
    
3.  Fill in the **name and description (optional), then select the branch and environment**, enable the Create [Preview Token](https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens#about-preview-tokens) toggle, and Generate Token.  
    ![ImplementingLivePreview\_L3\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb0567501a748508b/67e1add8b9f9a60a39dc4132/ImplementingLivePreview_L3_img-4.png)

#### Key takeaways

- Connect **Basic implementation** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

Basic implementation. How to enable Live preview on your Stack? 1. Under stack settings, go to Live Preview, tick enable live preview and select a Default Preview Environment (https://www.contentstack.com/docs/developers/set-up-environments/about-environments). ! ImplementingLivePreview\ L3\ img-1.png (https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83eed7e9d24e0d53/67e1ad0029f30c277bf8de60/ImplementingLivePreview L3 img-1.png) 2. Go to Environment settings and add the base URL (hosted website URL) in that environment’s settings.This hosted website should be fetching data from the same environment. ! ImplementingLivePreview\ L3\ img-2.png (https://images.contentstack.io/v3/assets/bltebc53cfaf0dd64

### Retrieval tags

- Basic
- implementation
- implementing-live-preview
- lesson 03
- Basic implementation
- implementing-live-preview lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "03" and topics: [Basic, implementation].
Parent course slug: implementing-live-preview. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

| Label | URL |
| --- | --- |
| ImplementingLivePreview\_L3\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83eed7e9d24e0d53/67e1ad0029f30c277bf8de60/ImplementingLivePreview_L3_img-1.png` |
| ImplementingLivePreview\_L3\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd7f06a9a55b96fc3/67e1ad4db9f9a66e76dc40cf/ImplementingLivePreview_L3_img-2.png` |
| ImplementingLivePreview\_L3\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt17620102d7b0b49e/67e1adc3c0d1f26cc60a3d03/ImplementingLivePreview_L3_img-3.png` |
| ImplementingLivePreview\_L3\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb0567501a748508b/67e1add8b9f9a60a39dc4132/ImplementingLivePreview_L3_img-4.png` |

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| Environment | `https://www.contentstack.com/docs/developers/set-up-environments/about-environments` |
| ImplementingLivePreview\_L3\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83eed7e9d24e0d53/67e1ad0029f30c277bf8de60/ImplementingLivePreview_L3_img-1.png` |
| ImplementingLivePreview\_L3\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltd7f06a9a55b96fc3/67e1ad4db9f9a66e76dc40cf/ImplementingLivePreview_L3_img-2.png` |
| tokens | `https://www.contentstack.com/docs/developers/create-tokens/types-of-tokens` |
| Delivery Token | `https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens` |
| ImplementingLivePreview\_L3\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt17620102d7b0b49e/67e1adc3c0d1f26cc60a3d03/ImplementingLivePreview_L3_img-3.png` |
| Preview Token | `https://www.contentstack.com/docs/developers/create-tokens/about-delivery-tokens#about-preview-tokens` |
| ImplementingLivePreview\_L3\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb0567501a748508b/67e1add8b9f9a60a39dc4132/ImplementingLivePreview_L3_img-4.png` |