The campaign’s Installation tab provides links and code for displaying that campaign on your website. Copy the code from the campaign you want to show so it includes the correct campaign identifier.
Before you start
Make sure Double is installed on your website. The campaign widgets work with the Double embed script. If you still need to install it, use the guide for your website platform in the Installation collection.
Finding the campaign code
Open Campaigns in your dashboard.
Select the campaign.
Open Installation.
Copy the code for the widget you want to use.
Add it to an HTML or custom-code block in your website editor.
Choosing a widget
Embeddable form
The donation form widget adds a campaign form to your page. It works together with the pop-up checkout.
<div class="double--donation-form-widget" campaign="your-campaign-slug"></div>
Embeddable progress bar
Use this widget to display the campaign’s progress bar. Configure the goal in the campaign’s Checkout → Progress bar settings.
<div class="double--progress-bar-widget" campaign="your-campaign-slug"></div>
Embeddable campaign card
A campaign card displays the campaign’s image, name, description, progress, and donate button. You can add multiple cards to feature multiple campaigns.
<div class="double--campaign-card-widget" campaign="your-campaign-slug"></div>
Embeddable donation feed
Use the donation feed widget to display a feed for the selected campaign.
<div class="double--donation-feed-widget" campaign="your-campaign-slug"></div>
Replace your-campaign-slug with your campaign’s slug, or copy the complete snippet directly from its Installation tab.
Opening a campaign from a button or link
The same tab includes a Campaign URL and Custom button code. The campaign-specific button code uses:
<button onclick="Double.openCheckout({campaign: 'your-campaign-slug'});">Donate</button>For more button setup guidance, see How to use Double with custom buttons.
If a widget does not appear
Check that the Double embed script is installed on the page.
Check that the code is in a block that accepts HTML.
Check that the campaign identifier matches the campaign you want to display.
Review the published website as well as the website editor’s preview.
When contacting support, include the website page URL, campaign name, and the type of widget you added.