Skip to content
Web Monetization logo Web Monetization
GitHub

Offerwall tool

Google’s Offerwall is a monetization tool that gives publishers more ways to earn beyond traditional advertisements. For example, a visitor could choose between watching a short ad or providing their email address before accessing content.

This page describes how to use the Offerwall tool and Google Ad Manager to add Web Monetization to your Offerwall.

Before you begin

Section titled “Before you begin”
  • You must have a Google Ad Manager account.
  • You can only add one custom user choice to a Google Offerwall.

Set up the custom choice screen

Section titled “Set up the custom choice screen”

Change the custom choice screen’s appearance

Section titled “Change the custom choice screen’s appearance”
  1. Enter your wallet address.
    Blank wallet address field and continue button
  2. Click Continue.
  3. Change the label of a configuration by selecting the pencil icon and typing over the default.
    Screen with three tabs, all with default labels, and a pencil icon appearing next to the first label
  4. Select the font to use on the screen.
    Panel showing the font family drop-down menu
  5. Select the colors to use for the background, body text, theme, and headline text.
    Panel showing background, body text, theme, and headline text color previews. Selecting a preview opens a menu with a paint can icon and a set of preselected colors to choose fromClick the paint can icon to enter a hex value or use the color picker.
    The color picker tool with a field for the hex value at the bottom
  6. Select the screen’s corner radius.
    Panel showing container corner radius options of no, light, and pill rounding
  7. Review your changes in the preview panel. The preview shows what a visitor will see if they don’t have the Web Monetization extension.
    Visitor without extensionPreview panel showing how the screen will appear with the default colors and light corner roundingDifferent screens will appear if the visitor has the extension enabled or disabled. The appearance settings you selected above also apply to these screens.

    Visitor with extension enabled
    A confirmation screen stating 'you're all set' with a close button
    Visitor with extension disabled
    A stylized error screen that instructs the visitor to use their Web Monetization extension

Generate your script

Section titled “Generate your script”
  1. Click Save and generate script.
    The save edits only and the save and generate script buttons side by side A wallet confirmation prompt appears.
    Confirmation prompt showing wallet address and confirm button
  2. Click Confirm. You’re directed to your wallet provider to sign in and confirm your ownership of the wallet address. After confirmation, you’ll return to the Offerwall tool page.
  3. Copy the script that appears in the overlaid screen.
    Example script
    <script
      id="wmt-offerwall-init-script"
      type="module"
      src="https://tools-cdn.webmonetization.org/offerwall.js"
      data-wallet-address="https://walletprovider.com/MyWallet"
      data-tag="version1"
    ></script>
  4. Add the script to the <body> of each page you want to offer Web Monetization.

Add Web Monetization as a custom Offerwall choice

Section titled “Add Web Monetization as a custom Offerwall choice”

You must sign in to your Google Ad Manager account to complete these steps.

  1. Select the Privacy & Messaging tab.
  2. Find the Monetization section.
  3. Find the Offerwall message type card and click Create.
    Ad Manager dashboard with the Privacy & Messaging tab, Monetization section, and Offerwall Create button highlighted
  4. Under Your sites, click Select sites.
    Offerwall message creation screen with Select sites button highlighted
  5. Choose the sites where you want your Offerwall to appear, then click Confirm.
  6. Under User choices, locate the Custom choice option and click Set up. Offerwall message creation screen with the Custom choice option highlighted
  7. Select the confirmation box that states, I confirm that I have implemented the Offerwall Custom Choice API, then click Next. Custom choice setup screen with a checkbox indicating you've implemented the API selected and the Next button active
  8. Enter a title for your custom choice and click Next. We recommend using Web Monetization.
    Custom choice setup screen with recommended title entered in the field and the Next button active
  9. Enter a subtitle for your custom choice and click Next. We recommend using Support us with micropayments.
    Custom choice setup screen with recommended subtitle entered in the field and the Next button active
  10. Click Confirm.
    Custom choice setup screen with Confirm button active
    The Offerwall Message screen appears. Your Web Monetization choice displays in the preview area.
    Offerwall preview screen with Web Monetization appearing as a choice
  11. If you’re not ready to publish this version of your Offerwall, click Save draft. Otherwise, click Publish.
  12. Go to your site and check that the Offerwall appears correctly. If your Offerwall doesn’t appear at all, check your implementation of the Offerwall Custom Choice API.

Change an existing appearance configuration

Section titled “Change an existing appearance configuration”
  1. Go to the Offerwall tool , enter your wallet address, then click Continue.
  2. Make your changes, then click Save edits only. Your script remains the same. There’s no need to update your site’s code.
  3. Refresh a page on your site that uses the configuration’s script to verify your changes are live.

Offerwall tool