> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit and preview your experience from your website

> Open the Algolia Experiences editor on top of your staging site to edit and preview changes against your real content before publishing them to production.

<Callout icon="flask-conical" color="#14b8a6">
  This is a **pilot feature** according to [Algolia's Terms of Service ("Beta Services")](https://www.algolia.com/policies/terms/). Functionality may change before general availability.
</Callout>

Algolia Experiences lets you preview unsaved changes against a staging environment before publishing them to production.
Previewing live helps you:

* Verify changes against your real content and layout, not a mocked preview.
* Iterate on theme and layout side by side with the editor and your site.
* Catch issues before end users see them, since saved changes go live immediately.

This guide assumes you've already [created an experience and embedded the production snippet](/doc/guides/building-search-ui/algolia-experiences/get-started) on your site.

## Embed the preview snippet on your staging environment

<Steps>
  <Step title="Open the Staging snippet">
    In the editor, open the **Integration help** dialog and select **Staging**.
    Copy the preview snippet.
  </Step>

  <Step title="Paste it on your staging environment">
    Paste the preview snippet before the closing `</body>` tag of the pages in your staging environment where you want to test the experience.
  </Step>

  <Step title="Open the editor in-page">
    Open a page that includes the preview snippet.
    In the bottom-left corner of your page, click the Algolia button.
    The editor opens as a side panel in the same browser tab, next to your site.

    <img src="https://mintcdn.com/algolia/_oKnJxTqVbhHfObC/images/experiences/preview-changes/pill.png?fit=max&auto=format&n=_oKnJxTqVbhHfObC&q=85&s=48c702d1e2f1ab786d8d5838e5d2365a" alt="Screenshot of the floating Algolia pill in the bottom-left corner of a staging page." width="1800" height="1278" data-path="images/experiences/preview-changes/pill.png" />
  </Step>

  <Step title="Sign in (first time only)">
    The first time you click the Algolia button in a new browser,
    you need to authenticate.

    <img src="https://mintcdn.com/algolia/_oKnJxTqVbhHfObC/images/experiences/preview-changes/auth.png?fit=max&auto=format&n=_oKnJxTqVbhHfObC&q=85&s=31c59a64b859a514b8883176d52712a5" alt="Screenshot of the Algolia dashboard authentication page shown after clicking the staging pill." width="1800" height="1228" data-path="images/experiences/preview-changes/auth.png" />
  </Step>
</Steps>

You can now edit the experience and see your changes against your staging content in real time.
When you're happy with the result, save to apply the changes to every page that embeds the experience.