Widgets are a great way to embed your donation form, donation amounts container, or an event registration page on your organization’s website or any other relevant web page. You can also choose to display a preselected option on your form for donors, such as a certain donation amount, restriction, pledge, or event.

Please note: Embedding form elements with widgets only works for Qgiv donation forms. Peer-to-peer and auction forms are not supported.

Contents:

• Widget Types and Support
• Getting Started
  • Form Widget
  • Event List Widget
  • Event Registration Widget
• Configuring the Widget on Your Site
  • A Note for Squarespace Users 
• Making Changes to Widgets

 

Widget Types and Support

• Form Widget
• Event List Widget
  • Legacy Events
• Event Registration Widget
  • Redesigned Events

Your website editor must accept custom HTML for a widget to work properly. There are a few website hosting services that don't play well with widgets, including: 

• Wix
• GoDaddy Website Builder
• Google Sites
• WordPress.com (Please note: This is NOT the same as WordPress.org, which works fine!)
  • WordPress.com will work if you are using one of their plugin-enabled plans (Creator or Entrepreneur) (last verified January 2024)

If you're having trouble, please send our Customer Experience team an email at support@qgiv.com and we'd be happy to help!

Please note: When you embed a widget, our secure link (https://secure.qgiv.com/for/YOURFORMNAME) is masked behind your URL. This means donors won't see https:// at the beginning of the URL unless your site has an SSL certificate. However, the donation form (the widget) is still secure because all processing takes place on our servers.

If you'd like to visually reassure donors that their information is secure, it's worth investing in an SSL certificate for your organization's website. That way, donors will feel comfortable when they see the https:// they're used to, and you won't have to use overly technical jargon to explain that their data really IS safe!

You'll also need to make sure you have any proper redirects in place on your end. If your widget URL includes "www.", but someone types in your URL without it, you need to be sure your site will redirect them to the appropriate URL in order for the widget to load correctly. Our widgets follow best practices and only support ONE version. You can force the website to redirect to just ONE version. You can see an example by visiting qgiv.com - you can type in qgiv.com or www.qgiv.com and you will always land on the www.qgiv.com version.

 

Getting Started

You can access Widgets area by clicking Embed within the Fundraising menu in your left-hand navigation.

Once you click on the Embed navigation item, you’ll be taken to a new screen. Any widgets you’ve previously added will display in a list below the heading.

To create a new widget, click the Add New Widget button.

 You’ll be presented with the following:

In the Type drop-down menu, you‘ll see Form, Event List, and Event Registration options.

The Form option will embed your entire donation form. You’ll also have further options for preselecting certain areas on your form.

The Event List widget offers a way to embed the full event registration portion for a legacy event on a Qgiv donation form.

Please note: The Event List widget is not supported on redesigned events.

The Event Registration widget offers a way to embed a button that opens the registration page for a redesigned Qgiv event.

 

Form Widget

Let’s take a look at your options when you select Form. If you have multiple forms, you’ll choose a form you’d like to embed from your list.

 

If you’d like to add an optional Label to display above your embedded form, you can fill in your desired text here.  

Next, you’ll see the option to direct link to a specific item on your form once it’s loaded. If you don’t choose an option from the list, the default view of your form will be embedded with no options preselected for donors.

You can choose from:

• Restriction You can use this option to preselect a restriction other than the default on your public-facing form.

• Amount Choosing this option preselects a donation amount on the public-facing embedded form.

• Plan Choosing this option preselects a previously created giving plan on the public-facing embedded form. 

• Event Details [Legacy Event] Choosing this option preselects a legacy event registration on the public-facing embedded form.

 

• Events Choosing this option displays your event list on the public-facing embedded form.

 

Event List Widget

If you're creating an Event List widget and have multiple forms, make sure you select the donation form on which you've set up the events that you'd like to embed.

 

Event Registration Widget

Please note: The Event List widget is only supported on redesigned events.

The Event Registration widget creates a Get Tickets button that opens registration for a single event. First, select the donation form on which the event is set up.

Then, Select an Event you want to link to. 

You can also customize the Button Label (the default wording is "Get Tickets") and several other button elements that are detailed in the Customizing the Look and Feel of the Embedded Button section.

Clicking the embedded button will open a registration modal right on your site.

Please note: When you configure the Event Registration widget, you can set the button to direct to an external event page. You can configure the external event URL in the Advanced Settings for the event.

 

Customizing the Look and Feel of the Embedded Button

The look and feel of the embedded Get Tickets button may be customized.

First, select from the Button Type drop-down menu.

If you’d like to adjust the embedded button's font, colors, and corner style, select Styled from the drop-down.

Unstyled embedded buttons will look something like this on your site:

Please note: Styled buttons include some customization options that may be less convenient for developers to adjust once embedded. You can customize the appearance of an Unstyled embedded button by adjusting the CSS on your website.

To customize the Button Label (the default text is “Get Tickets”), type the desired text into the Button Label field.

To customize the Button Font (the default is Arial), click the drop-down menu to display all available fonts:

• Arial
• Baskerville
• Courier New
• Georgia
• Helvetica
• Helvetica Neue
• Lucida
• Palatino
• Times New Roman
• Verdana

You can customize the Button Font Color by selecting either Light (white) or Dark (black) from the drop-down menu. The default is Light.

To adjust the Button Color, click into the colored square to open a color picker.

Use the slider to select a color. If you know the hex code for the color you'd like to use, you can enter it in the # field. Then click OK.

Please note: The button color will default to the theme color you've selected for your event. If you have not set a Theme Color, then blue, as shown in the image above, will be the default. 

Finally, Button Corner Style determines the shape of the button. The options are Rounded, Square, or Pill. 

Rounded 

Square

Pill 

Once you've chosen your desired button style and settings, be sure to click Save.

 

Configuring the Widget on Your Site

Once you’ve selected your widget Type, you can enter a name for your widget in the Label field.

Next, enter the Page URL where you’ll be embedding the widget.

Pro tip: This must be the exact URL of the page on which you're embedding the widget. To make sure you get the exact URL, you can simply navigate to the page where you'll place the widget, and then copy the entire URL from your browser's address bar (highlight all the text, including "http://" or "https://" at the beginning, right click in the address bar, and then select Copy from the options that appear). In your widget settings, right click in the Page URL field shown below and choose Paste from the options that appear. You can also hit Ctrl + V to paste the URL text.

 

The Default Width field allows you to adjust the width of a widget. Since it’s responsive, it can scale down depending on how your site is set up.

When you’re done configuring your widget, click Save. You can also cancel if you decide you don’t want to create the widget.

Once you click Save, a box will appear containing the embed code. Just copy and paste the code wherever you’re embedding the widget!

 

A Note for Squarespace Users 

If your Squarespace site uses Version 7.0, for your embedded Qgiv form to display correctly, you must disable Ajax loading.

To disable Ajax: 

1. In the SquareSpace Home menu, click Design, and then click Site styles. 
2. Search for the Enable Ajax Loading option. 
3. Uncheck Enable Ajax Loading. 

To read more about Ajax loading, check out Squarespace’s support documentation.  

 

Making Changes to Widgets

You can make changes to a widget at any time by accessing the main widgets listing.

To easily find the widget you'd like to edit, you can also sort and filter by All, Form, Donation Amounts, Event List, or Event Registration.

Click the arrow next to the widget you’d like to edit to begin making changes. Be sure to click Save when you’re done!

You can also delete a widget at any time by clicking Delete, located in the upper right-hand corner of the settings of each widget.