Website Dialogs
Dialogs are dialogs that appear over your website content. They're one of the most effective tools for grabbing attention, collecting information, and guiding visitors toward an action.
A well-timed dialog can turn a passive visitor into a newsletter subscriber, announce a limited-time offer, or confirm an important decision before it happens. Unlike pages, which visitors navigate to, dialogs come to the visitor. That makes them powerful but also easy to overuse.
This guide covers everything you need to know about creating, designing, and managing dialogs in Giant Context.
The Dialogs List
When you navigate to Website > Dialogs in the left sidebar, you'll see a comprehensive table listing all your dialogs. This central view makes it easy to manage your existing dialogs and create new ones to capture visitor attention.
Take Control of Your Website Dialogs
Dialogs are powerful dialogs that appear over your content to grab attention and collect information. Use the Dialogs dashboard to view, edit, and manage all your active dialogs in one centralized list.
Creating a new dialog
The Visual Editor
Building your dialog content is seamless because it uses the exact same sections-and-blocks system as your standard website pages. The only difference is the canvas size—your content is optimized for a focused dialog rather than a full browser width. Use the left sidebar to browse and add available blocks, and access the Advanced Styles panel via the styles tab to fine-tune the appearance of any element.
Design Dialogs with the Visual Builder
Dialogs use the same intuitive sections-and-blocks system as your standard website pages. Browse available block types in the left sidebar to craft the perfect dialog, keeping in mind the smaller canvas size.
The canvas (center)
The center canvas provides a real-time preview of your dialog exactly as visitors will see it. Click any element to select and edit it, drag blocks to instantly rearrange your layout, and watch your design update live as you work.
The block panel (left sidebar)
Open the block panel in the left sidebar to browse available block types. Drag and drop any block directly onto your dialog canvas to build your layout. To customize a block's appearance or access its Advanced Styles panel, simply select it on the canvas to reveal its settings.
The layers panel (bottom-left)
Dialogs use the same powerful sections-and-blocks system as your standard pages, but within a much smaller canvas. This compact space means elements can easily overlap or become deeply nested, making them difficult to select directly. When you need precise control, use the structural tree in the left sidebar. This complete outline view reveals every section and block in your dialog, allowing you to instantly select, rearrange, or edit hidden layers without accidentally disrupting your layout.
The toolbar
Dialog Settings
To control exactly how and when your dialog appears, click the Settings button (gear icon) in the editor toolbar. This opens the dialog settings panel, which is organized into two distinct tabs to help you fine-tune your visitor experience.
Appearance
Details
Building your dialog content
Dialogs use the exact same sections-and-blocks system as your standard website pages. The key difference is your canvas: because a dialog appears in a dialog rather than filling the full browser, the content area is significantly smaller. Keep this limited real estate in mind as you build to ensure your message remains clear and focused.
Design Tip. Always preview your content at the dialog's actual width to ensure a seamless fit. Dialogs are designed for focused, high-converting interactions—resist the urge to cram your entire homepage into a single dialog.
Common Use Cases
Tips for Dialogs That Don't Annoy Visitors
Dialogs are dialogs that appear over your website content. By design, they interrupt what a visitor is doing. When timed perfectly and filled with relevant content, that interruption is welcome—it captures attention, collects valuable information, and guides visitors toward a meaningful action. When executed poorly, it frustrates users and drives them away. The principles below will help you design dialogs that enhance the user experience instead of detracting from it.