Getting started with WidgetMakr? Follow this guide to set up a Multi-Step widget that can be used for donations or a sign-up form. This guide goes through all the options and features available in the Multi-Step widget.
1. Click on the button, which is located above the yellow Personal Fundraising Widget This will open a new page with Step 1: Make a Widget. Under this section, you will be able to design and select the type of widget you want to make.
Step 1: Make a Widget
On the right-hand side you will see vertical gray boxes. The Widget Format section helps you define the type and style of widget you want.
1. Widget Type: Click on Multi-step to see the different options available to this type of widget.
2. Multi-Step Alignment: On the drop-down options for Multi-Step Alignment, select Inline. This will help your widget display properly when embedded onto a webpage.
3. Purpose: Choose between Political or Nonprofit.
- Political: Includes a Disclaimer section required by the Federal Elections Commission.
- Nonprofit: Removes the Employer Disclaimer section and has additional theme colors.
4. Widget Enhancements: Checkbox options include Use Better Labels and Allow Simplified View.
- Use Better Labels: When you start typing in a field on your widget, the Better Labels option moves the label of the form from inside to right above it. This way you can tell the difference between fields such as first and last name when entering text.
- Allow Simplified Widgets: The Simplified Widget cuts the donation widget down to one step for donors who have Spark accounts and opted to save their payment information. For more information, please refer to the How to Use Simplified View guide.
Immediately below the Widget Format box are options for Theme colors. You can select the colors of your widget from the existing color palettes or you can use the Select a Color Editor to select your own.
Make a Widget
Use this section to add the headline and widget description.
1. Add CSS: Click on this button to add custom CSS to change the appearance of your widget. Once you click on it, a CSS editor will appear and give you the option to save this code to your WidgetMakr Library.
2. Headline: Click on this section to name your widget. This will appear as the title of the widget.
Contact Information Section
Click on the gray box with the First and Last Name fields to edit what Contact Information you are collecting. You can also add or delete fields in this section.
Under this section, you can edit the important donation section of your widget.
1. Default Values: To the right of the Add Custom Fields section, you can edit the Donation Amount Click inside this section to edit, add or delete the Donation Values the widget offers.
Note: In order to make WidgetMakr more secure, donation amounts must be $2 or more.
2. Spark Giving Matrix: This option customizes the donation amounts offered to donors who have existing Spark accounts. Please refer to the Set Up the Giving Matrix guide to learn more.
3. Recurring Options: Click on this section to expand the options for setting up Recurring Donations. Please refer to the How to Set Up Recurring Donations guide for more information.
Add Custom Fields
Chose from the standard fields, or add your own custom fields. Custom field options include drop-down menus, and checkboxes.
Click on the button to add a new field. At the bottom of the box, you’ll see a space to choose what type of form field or text area the custom field should be. If you want to delete a custom field, click on the button.
If you are using your widget for a political campaign or organization, you are required by the Federal Election Commission to capture the employer and occupation of donors.
Click on this section to expand it and edit make any desired changes to this section or add additional fields for information required in your city or state.
Scroll back to the top of the page and click on the orange button to move onto Step 2: Preview Your Widget.
Step 2: Preview Your Widget
1. A Preview of your widget will appear. If you wish to make changes, click on the Step 1: Make a Widget button at the top to go back and edit.
2. Preview Display: In this drop-down menu, toggle between previewing the widget to fit a desktop computer or a mobile phone.
3. Use the slider to change the height of the widget to the size needed to fit on your website.
4. Add Description: Give each widget their own unique description. This description is for WidgetMakr only and will not display on the widget.
5. Tag Your Widget: Create tags for each widget that make them easy to search for and sort by on the main Widget Tab.
6. Scroll to the top of the page and click on the orange button to save your work and proceed to the next step.
Step 3: Thank You Messaging
1. Include a Thank You Message: Use this text editor to compose the message that will appear once a donation has been submitted.
2. Add Short Code: You can insert a Short Code into your thank you message to customize it. Select the options from a drop-down menu to add them.
Short Code options include:
3. Load a Saved Message: Load a pre-saved thank you message from the drop-down menu. You can also save the message you create to the WidgetMakr Library by clicking on the Save to Library
4. Redirect to a Thank You Page: If you prefer to send the donor to another webpage for a thank you message, insert the link in the field next to Redirect donor to this URL instead.
5. Email Thank You Message: Enter the text you would like emailed to your donors (HTML enabled). You can also use the Short Codes listed above.
6. From Address: Enter the email address you wish the thank you email to be sent from. It must be in the following format: Washington for Congress Info@washingtonforcongress.com>.
7. Event Code: In the box labeled Crimson Settings, you can add an event code if you are also using Crimson events. For more information, please see the Crimson Helpdesk.
8. Assign Source Code: If you wish to use Source Codes to track your widget, either select a previously used source code in the drop-down menu or enter the new one into the field below it. For more information, please refer to the Add a Source Code guide.
9. Add Conversion Tracking: Click on the +Add link if you want to add Google Analytics or another tracking platform to your widget. In the drop-down menu, select which platform you want to use and then enter the ID number. Look up the Connect Google Analytics/Google AdWords to a Widget guide for more information.
10. Enable Payment API: If you are using the WidgetMakr API, select this box. This is optional and should be used at the direction of your web developer. Click here for help on finding WidgetMakr’s API documentation.
11. Click on the orange button to complete your widget.
Finishing Your Widget
● Height and Width
Height and Width can be adjusted within in the multi-step widget embed code itself, no need for CSS. Just edit the height= and width= areas of the code before applying it to your website.
● Donate Button You can choose to have the multi-step widget display on the screen of the website page it is embedded on, or you can choose to hide it behind a Donate Button. When clicked, the widget will then display as a shadow box over the screen.
Payment API Options
If you wish to build your own form using WidgetMakr processing, you will need to enable the Payment API.
1. Open up your widget, and go to Step 3: Thank You Messaging.
2. Scroll to the bottom of the page. Under Widget Settings, look for the check box labeled, “Enable Payment API.” Check on the box to turn on the Payment API.
3. Click on the link for “View Payment API Instructions” for additional details on how to build custom forms with the Payment API. This will open in a new window or tab.
4. Go back to your widget and click on the orange button to save your changes.
Note: In order for your custom form to work with WidgetMakr, you need to contact the Help Desk and ask us to enable the tokenization API for your domain. This API won’t work until it has been enabled for your domain. For more information, please see the Payment API documentation.