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

# Overview

> Use our Chrome Extension to edit and preview GuideWhale content directly inside your application.

## Why it Matters

Our Chrome extension allows you to edit all types of content (guides, banners, modals, etc.) directly within your web application.
You can also use it to visually tag pages and features for segmentation, milestones, analytics and content targeting.

<CardGroup cols={2}>
  <Card title="Content Editor" icon="pencil-line" href="/editor/content-editing">
    Start editing your content directly inside your application.
  </Card>

  <Card title="Content Templates" icon="file-lines" href="/editor/templates">
    Use a set of predefined templates to get started or create and save your custom ones.
  </Card>

  <Card title="Event Triggers" icon="bolt" href="/editor/event-triggers">
    Configure what events need to be captured for a trigger to be executed.
  </Card>

  <Card title="Target Element Selection" icon="crosshairs" href="/editor/target-element">
    Configure how target elements are selected and validated.
  </Card>
</CardGroup>

## Getting Started

To get started with our extension, first download it from the [Chrome Web Store](https://chromewebstore.google.com/detail/guidewhale-editor/cpjkegfbdobndinmoiompanbmdhpifkn).

* After downloading, pin it to your browser toolbar for easy access.

<Frame>
  <img src="https://mintcdn.com/guidewhale/qfWboK87hc9tTHZR/editor/_images/extension/pin.png?fit=max&auto=format&n=qfWboK87hc9tTHZR&q=85&s=219f1f6113f7d642e7ef059c7191c75c" alt="Pin extension to toolbar" width="609" height="451" data-path="editor/_images/extension/pin.png" />
</Frame>

* Make sure to allow extension on every site you want to use it on.

<Frame>
  <img src="https://mintcdn.com/guidewhale/WoA2Sc4M3aQ7kavD/editor/_images/extension/permissions.png?fit=max&auto=format&n=WoA2Sc4M3aQ7kavD&q=85&s=ff4836060d4411349b51d966d0154542" alt="Extension site permissions" width="448" height="445" data-path="editor/_images/extension/permissions.png" />
</Frame>

When opening the side-panel, GuideWhale will automatically detect if you're already logged-in to your account. If not, you will be prompted to log-in using your credentials.

<Note>
  If the browser extension doesn't automatically detect your login, try closing the side-panel and re-opening it.
</Note>

## Guide & Guide Steps Editor

To get help with all guide and guide step editor settings, visit the [Guides Overview](/content/guides/overview) section.

### Guide Editor

Edit general guide settings, select your theme and get an overview of all guide steps.

### Guide Step Editor

Edit individual guide steps, their content, appearance and additional triggers.

## Checklist Editor

For checklists, we primarily use our extension editor to preview how checklists are displayed to your users directly inside the application.
<Note>At the moment, checklist tasks can only be edited through our dashboard editor.</Note>

* **Settings:** General settings, including launcher content and appearance.

* **Target Pages:** allow you to easily identify if your checklist is showing on correct application pages.

* **Start Condition:** can be used to visually tag any interactions user has to perform before checklist is shown.

* **Position:** configure where on the page the checklist should be shown. This is typically either on the left or right side of the bottom of the page. If [Resource Center](/content/resource-center/overview) is configured to show checklist inside it, this option is not used.

* **Content:** configure style of your checklist. These settings should generally be kept the same as your global theme, but you can always adjust checklist's width to match its content better.

* <Tip>To get help with all checklist editor settings, visit the [Checklist Overview](/content/checklists/overview) section. </Tip>

## Survey Editor

For surveys, we primarily use our extension editor to preview how surveys are displayed to your users directly inside the application.

## Widget Editor

### Modal Windows

Create, edit and preview modal windows.

### Banners

Create, edit and preview banners.

### Hints

Create, edit and preview target element hints.

### Embeds

Create, edit and preview embedded content.

## Event Tag Editor

### Pages

Use our extension to easily tag and validate page configurations so that you can be sure your page conditions are correct.

### Features

Visually tag target elements and select what events should trigger the feature usage.