Widget tool

Add a payment widget to your site so visitors can send you a one-time payment. The widget appears to all visitors, even those with an active Web Monetization extension.

Before you begin

• Your visitor must have a wallet address with a compatible wallet to send a payment using the widget.
• If your site is monetized with multiple wallet addresses, only the address connected to the widget will receive one-time payments. You can change the address connected to the widget at any time.

Create a new widget

Connect your wallet

1. Enter your wallet address.
   
2. Click Continue. A confirmation prompt appears.
   
3. Click Confirm. You’re directed to your wallet provider to sign in and confirm your ownership of the wallet address.

Change the widget’s contents (optional)

1. Change the label of a configuration by selecting the pencil icon and typing over the default.
   
2. Expand the Content drop-down menu. Enter a title for the widget or choose from the suggested options.
   
3. Enter the message to show to your visitors or use the default text. We suggest changing the message so that it’s tailored specifically to your audience.
   
4. Review your changes in the preview panel.
   
5. Click Done to collapse the Content section.

Change the widget’s appearance

1. Select the font and font size to use in the widget.
   
2. Select the background, text, and button colors to use.
   Click the paint can icon to enter a hex value or use the color picker.
   

   Note

   Changing the color of the button also changes the title bar’s background color.

3. Select the widget’s corner radius and position.
   
4. Review your changes in the preview panel.
   

Generate your script

1. Click Save and generate script.
   

   Save edits only

   Click Save edits only if you aren’t ready to generate your script. Your configurations are saved on webmonetization.org.

2. Add the script to your site. We recommend placing it just before the closing </body> tag. If you’re using a site management tool like WordPress, you’ll place the code in a script-type element.

   Example script

   <script
     id="wmt-widget-init-script"
     type="module"
     src="https://tools-cdn.webmonetization.org/widget.js"
     data-wallet-address="https://sandbox.ilp.link/rabeb"
     data-tag="version1"
   ></script>

3. Go to your site and check that the widget appears correctly.

You’re now ready to accept one-time payments. Remember that if your site is monetized with multiple wallet addresses that only the address connected to the widget receives one-time payments.

Change an existing widget configuration

1. Enter your wallet address.
   
2. Click Continue. If the confirmation prompt appears, you must first confirm your ownership of the wallet address.
3. Make your changes, then click Save edits only. Your script remains the same. There’s no need to update your site’s code.
4. Refresh a page on your site that uses the configuration’s script to verify your changes are live.

Connect widget to a new wallet address

1. Enter your current wallet address.
   
2. Click Continue to connect to your wallet. A list of your saved configurations appears.
3. Select the configuration that you want to connect to a new wallet address.
   
4. Click Add another wallet address.
5. Enter the new address in the wallet address field.
   
6. Click Continue. A confirmation prompt appears.
   
7. Click Confirm. You’re directed to your wallet provider to sign in and confirm your ownership of the new wallet address.
8. Click Save and generate script.
9. Replace the existing script on your site with the newly generated script.

All payments through the widget will now be directed to the new wallet address.

Content Security Policy (CSP) requirements

If your website uses Content Security Policy headers, you must add the following directives to allow the publisher tools embed script to work:

Directive	Value	Description
script-src	https://tools-cdn.webmonetization.org	Allows loading interactive tool script from the CDN
connect-src	https://tools-api.webmonetization.org	Allows fetching configuration data from the API
img-src	data: https://tools-cdn.webmonetization.org	Allows loading logos/thumbnails and inline SVG icons
style-src	https://tools-cdn.webmonetization.org	Allows loading CSS files and dynamic theme styling (custom colors/fonts)
font-src	https://tools-cdn.webmonetization.org	Allows loading custom web fonts

Widget tool