Preview your ad or HTML page

As you're building your ad or HTML page, you can preview it in your browser to see how it will look and behave once it's published, including any events. Previews are intended for viewing on your own computer. If you want to share a file with other people, publish it instead.

To preview your work, click the Preview button in the top-right corner of the window.

You cannot preview a document in your browser by directly opening the HTML file included in your source files. Use Google Web Designer's preview functionality instead.

Browser selection

Google Web Designer automatically detects which browsers you have installed. To use a particular browser for previewing, click the down arrow on the Preview button and select the browser from the list. The browser that you select becomes the default for future previews.

Responsive viewports selection

For responsive documents, you can select the range of available preview sizes by clicking the down arrow on the Preview button.

  • Standard – Common sizes for the ad environment.
  • Advanced – The full set of sizes for the ad environment.

Preview mode

Google Web Designer has different preview modes, depending on the document type. You can select preview mode options from the controls at the top of the preview page.

Check the table below to see what preview mode options are available for your document. Simple banner ads don't offer preview mode options.

If your document contains the Parallax component, the preview emulates a mobile web page with enough content for you to scroll above and below the component.

  • Device – Select a mobile device or Custom.
  • Rotate device – Switch between portrait and landscape.
  • Viewport size – If you select Custom for the device, you can set a new size by editing this field or dragging the preview's resize handles.

Parallax ads always use the Parallax preview mode.

Document type Preview mode options

Expandable, interstitial or HTML page

You can interact with the preview of your document to see how it behaves.

  • Preview mode – Select Desktop or Mobile.
  • If you select Mobile, you can choose from additional options:
    • Device – Select a mobile device or Custom.
    • Rotate device – Switch between portrait and landscape.
    • Viewport size – If you select Custom for the device, you can set a new size by editing this field or dragging the preview's resize handles.

Responsive

The preview lets you see at a glance how your responsive document renders at different sizes.

  • Preview mode – Select Single size, or All sizes to see multiple sizes at the same time. The list of sizes depends on your responsive viewports selection.
  • Custom size – If you select Single size > Custom, you can set a new size by editing this field or dragging the preview's resize handles.
    • If you have breakpoints, you can resize the preview to fit between breakpoints by clicking a range along the top or left side of the preview area.

Dynamic

You can preview your dynamic ad with different sets of sample data.

  • Preview mode – Select Single size, or All sample data to see multiple versions using different sample data.
  • Sample data – Select which sample data sets to preview.

More than one type?

Some document types exclude options for other types.

  • Expandable and interstitial ads only display one version at a time in the preview, even if they're also responsive or dynamic.
  • Documents that are both responsive and dynamic (that aren't expandable or interstitial ads) let you preview either multiple sizes or multiple feeds at the same time, but not both.

Reload previews

To reset the preview of an ad or HTML page to its initial state, click the ReloadRefresh icon button at the right side of the preview control bar.

If you're previewing multiple versions of a responsive or dynamic ad, you can restart a single version by clicking ReloadRefresh icon beneath that version.

Previewing changes

Any previews already open in your browser won't reflect subsequent changes to your document or sample data, even if you refresh the page. Launch a new preview to see your edits.
Was this article helpful?
How can we improve it?