Create a guide with a simplified editor (beta)

The "Edit in Pendo" option is a simplified guide editor for creating and updating overlay and embedded guides for web, and announcements for mobile, without opening the Visual Design Studio. Add and edit guide content, manage steps, update themes, and preview your guide directly in the editor.

If your subscription has AI guide creation turned on, an AI assistant is also available in Edit in Pendo. You can describe what you want to communicate, and the assistant generates or refines guide content that you review before saving. The AI assistant doesn't access your application or visitor data. For more about our security and privacy practices, see Artificial intelligence (AI) at Pendo.

You can change a step's styling and location in Edit in Pendo. For other advanced guide settings, such as activation or targeting, open the guide in the Visual Design Studio by selecting Edit in my app from the guide's details page.

Requirements

To create or edit guides in Edit in Pendo, you must:

• Access Pendo through our US or EU environment (app.pendo.io or app.eu.pendo.io is where you sign in).
• Be assigned the Guide Creator or Guide Content Editor role.

To use the AI assistant in Edit in Pendo, you must also:

• Have Guides Pro included in your Pendo plan.
• Have the AI guide creation subscription setting turned on. A subscription admin can manage this setting in Settings > Subscription settings > AI access. For more information, see Subscription settings.

Create a new guide

To create a guide in Edit in Pendo:

1. From the left menu, go to Guides > Guides.
2. Select Create guide.
3. Choose the Application and, optionally, a category to help with organization.
4. Choose a guide type: Overlay or Embedded.
5. Choose a starting option based on your guide type:
   • Overlay guides. Choose from three options:
     • Start with a prompt. (Requires AI guide creation.) Describe what you want then select Create guide. The AI assistant drafts the best structure for you.
     • Walkthrough. Hover over this option and Select layout. This is best for multi-step experiences that help complete a task (web only).
     • Announcement. Hover over this option and Select layout. This is best for a one-time message such as a product update, reminder, or alert.
       
       
        
   • Embedded guides. Choose from two options:
     • Start with a prompt. (Requires AI guide creation.) Describe what you want the banner to communicate, then select Create guide.
     • Embedded banner. Under Start with a layout, hover over Embedded banner and select Select layout.
   • All of these options open a two-panel view for you to edit the content in your guide.
6. When you're finished, select Save guide in the top-right corner. This takes you to the guide's details page, where you can open it in the Visual Design Studio for settings that aren't available in the simplified editor. For more information using the Visual Design Studio to create a guide, see Create an overlay guide or Create an embedded guide.

Edit guide content

Whether you're creating a new guide or editing an existing one, you can update content directly in the preview panel.

In the preview, you can:

• Edit text and button content. Select the text directly in the guide and make your edits.
• Add, move, and delete blocks. Add text, buttons, images, videos, and code to a step, then arrange them. For details, see Add and arrange blocks.
• Change a step's styling and location. Select the container around a step to open its settings. For details, see Edit container settings.
• Add a new step. Select Add step below a guide step, then apply a layout.
• Duplicate or delete steps. Hover over a step and select the relevant icon.
• Update the guide theme. Select the Theme dropdown from the top of the page.

When you're done, select Save guide in the top-right corner to apply your changes.

Add and arrange blocks

Blocks are the pieces of content in a guide step, such as text, buttons, and images. You can add blocks from the Building blocks panel or from the step toolbar, then move them, place buttons side by side, and delete them. Only the blocks that your guide type and app support are available.

To add a block, do one of the following:

• Drag it from the Building blocks panel. Select Building blocks in the left navigation, then drag a block into the guide preview. A line shows where the block will be placed. You can also select a block in the panel to add it to the step shown at the top of the panel. To change that step, select a different step in the preview.
• Add it from the step toolbar. Hover over a step, select the + icon, and then choose a block.

The available blocks are text (Title, Subtitle, Paragraph), buttons (Primary, Secondary, Tertiary), Image, Video, and Code. The new block is selected so you can edit it right away.

To move or delete a block, select it in the preview, then use the block toolbar:

• Move up or Move down changes the block's position in the step.
• Delete block removes the block. You can also press Delete or Backspace while the block is selected.

In web guides, you can place up to four buttons side by side in a row:

• Add a button to a row. Drag a button from the Building blocks panel onto an existing button row. If the row already has four buttons, the button is added as a new row instead.
• Reorder buttons in a row. Select a button, then select Move left in row or Move right in row. You can also use the arrow keys.
• Move or align a whole row. Hover over the empty space in a row of two or more buttons and select it. Use the up and down arrows to move the row, or choose Left, Center, or Right in the panel on the left to align its buttons.

Edit container settings

Container settings control how a step looks and where it appears in your app. They're available for overlay and embedded web guides, but not for announcements or mobile guides. They match the step settings in the Visual Design Studio. For more detail, see Edit overlay guide step settings.

To edit a step's container settings:

1. In the preview panel on the right, select the container marked by the blue border around the step. The Edit container settings open in the panel on the left.
   
2. Change the settings in the Styling and Location tabs, described below.
3. Select Save guide in the top-right corner.

The Styling tab has these settings:

• Step theme. The saved styling of the layout and building blocks for this step. Choose a different theme to style this step differently from the rest of the guide. For more information, see Manage guide styling with themes.
• Container elements:
  • Caret. A triangle arrow that points from the step to the element it opens next to. Available only when the step is positioned relative to an element.
  • Close button. Adds or removes the close button (X) in the corner of the step.
• Accessibility, for screen readers:
  • Aria label - Guide step. An alternative, accessible name for the step.
  • Aria label - Close button. An alternative, accessible name for the close button. Appears when the close button is on.
  • Role. The semantic meaning of the step, such as Dialog, Form, or Navigation. For more information, see Mozilla's WAI-ARIA roles.
  • Autofocus this step. Makes the step the first element that screen readers read when it appears.
• Advanced:
  • Use CSS Flexbox to render layout. Lays out the step's content with CSS Flexbox. Requires web SDK version 2.277.0 or later.
  • Show over HTML dialog elements. Shows the step above a window built with the HTML dialog element and keeps the step clickable. Turn this on if a window that opens on your page covers the step. Requires web SDK version 2.347.0 or later, and isn't available when the step is positioned relative to an element.

The Location tab has these settings:

• Page location. Choose Sitewide to show the step on any page of your app, or choose Only on this page and Select page to show it on one tagged Page. If the step is anchored to an element or tagged Feature, a sitewide step appears on every page where that element is present.
• Position on page. Where the step opens: a fixed spot, such as the center or a corner of the page, or next to an element.
• Position to element. For a step that opens next to an element, which side of the element it opens on.
• Anchor to element. The element the step is attached to. Choose Custom element to select any element on the page, or choose Tagged feature and Select a feature to use a Feature you've tagged. For more information, see Feature tagging.
• Guide persistence. Keeps the step on screen when the element it's anchored to disappears from view. Available after you anchor the step to an element, if the guide isn't a confirmation guide and doesn't use an element contains rule. Requires web SDK version 2.247.0 or later.

For location settings that aren't in this panel, select Edit location settings in the Location tab. The step opens in the Visual Design Studio, and you can't edit the guide in Edit in Pendo until you close it. If you have unsaved changes, select Save and Launch Designer to save them first. When you close the Visual Design Studio, Edit in Pendo refreshes with your changes.

Edit an existing guide

1. From the left menu, go to Guides > Guides.
2. Select the guide you want to edit.
3. Select Edit in Pendo from the guide's details page.
   
4. Make your changes in the preview panel.
   
    
5. Select Save guide in the top-right corner. This takes you to the guide's details page, where you can open it in the Visual Design Studio for settings not available in the simplified editor.

Note: The Edit in Pendo option might be unavailable for specific guide types, such as cross-app guides, announcements in the Resource Center, or guides where you lack edit permissions. This also applies to guides in specific experiment states.

Use AI to create or edit guides

If you have Guides Pro with AI guide creation turned on, a chat panel appears on the left side of the editor. Use it to describe the guide you want to create or the changes you want to make.

When creating a guide with Start with a prompt, the AI assistant generates a draft and estimates how many steps to include. You can edit, add, or remove steps at any time.

You can select content directly in the preview to make inline changes, or use the chat to ask the AI assistant to:

• Edit text blocks, images, and buttons.
• Add, remove, or duplicate steps.
• Switch between walkthrough and announcement formats (overlay guides only).
• Adjust the tone: for example, make it more formal or concise.
• Adjust the length: for example, make it longer or shorter.

When you're ready, select Save guide in the top-right corner.

AI beta limitations

The following actions aren't available in the conversational AI during the beta. The AI assistant will let you know if a request isn't supported. Use the Visual Design Studio to complete these tasks:

• Add or edit polls
• Adjust activation settings or step targeting
• Create localizations
• Limited element styling or positioning

Edit custom code blocks

If your guide includes custom code blocks, you can edit the code and preview changes in the two-panel view that opens when you select Edit in Pendo.

1. From the preview window on the right, select the code block <> to open the code editor. Three tabs appear in the left panel: HTML, CSS, and JavaScript. 
   
   
2. Select a tab to make any edits to the code block.
3. Select Save guide to apply your changes.
4. Select the back icon next to Step 1: Edit your code to return to the guide preview.

Important: Guide content is public, so anyone can view what's in a code block. Don't include API keys, tokens, passwords, or other sensitive information.

Launch a live preview

While working in Edit in Pendo, you can launch a live preview to see your guide in the context of your application as you build. This lets you view your changes in real time so you can see how the guide will actually look.

Requirement: Live preview requires web SDK version 2.339.1 or later.

To launch a live preview:

1. In Edit in Pendo, select Preview in the toolbar. 
   

2. Enter your application URL, then choose whether to open the guide preview in a new tab or a new window. If you open it in a new window, you can select a preset screen size, mobile or tablet, or enter custom dimensions, to see how your guide will display at that size.

   Note: If your browser is in full screen, you won't be able to open the preview in a new window at your selected size. It will default to opening a new tab instead.

3. Select Launch Preview.
4. Your application opens with the guide displayed.

While the preview is active, the Preview button changes to Previewing, confirming that live preview is on. Closing the preview or ending the connection stops it automatically.