Donation Widget- Widget Code

The widget configuration can be accessed from Admin > Widget Configuration:

Select the widget type and Edit to the right of the widget name you would like to edit:

Select Widget Code from the configuration options on the left-hand side.

This section is where you can easily find the iframe code to embed your widget into your website.

This can be easily inserted into the backend of your website and customised to fit into your webpage seamlessly

iframe Widget Code Example:

The code will have a default width:100% and height:1500px

These sizes can be changed to fit into your website and resolve issues of unnecessary blank spaces.

When this code is added to your website, these measurements can be edited. Check the sizing on your webpage and if scrolling is needed to access the whole widget and edit again if needed.

For example:

The above edit to the iframe will display my widget in a smaller width but the reduced height means the widget will need to be scrolled to access all of it.

These customisations work well when you want to have a small donation widget on the side of your webpage

It can also be used in conjunction with the Multipage option to create a small donation widget which doesn't take up a lot of space on the webpage but allows your donors to donate easily:

Widget Email Link:

The Widget Email Link allows you to create a personalised link to send in your emails and really engage with your supporters. It also gives the option to use your already configured widget, but include different financial information, for a specific appeal for example.

Create another Widget of the same type with a different GL Code and/or Campaign:

This iframe code could then be embedded on another page of your website asking for donations towards a specific campaign.

Create a link for an Email to prefill the Widget with a supporter's details:

This personalised link is a great tool to make donations even easier for your supporters. When they click this link, the fields in the widget will be populated with the information stored on their contact. Any updates to this information will be automatically updated on the contact but the payment will be matched correctly.

For the Email Link, you will need to enter the container page, where this widget will be displayed.

This is the page on your website where you have this widget embedded; your donate page, for example. When you copy this URL, make sure to right-click and paste as plain text to avoid any unseen formatting:

There is also the option to include a new GL Code or Campaign when creating this personalised link, as we did above.

This link will use one of the personalised supporter greeting options from Form Setup:

If neither of these options has been selected, then it will default to display:

“Hello #Salutation#, thank you for your support!” above the widget, it will not display the general greeting document.

This personalised link will also use the contact’s suggested payment prompts as the three donation prompts on the widget when these have not been manually changed.

If donation prompts have been added under Donation Options then these will always be used, even in a personalised widget link.

Another way to customise the donation widget is to set an amount in the URL, this can be done by adding &dtnAmt=XX to the URL and it will populate the number used as the amount on the widget.

This can be used when you have set amounts for many items which won't work as the donation prompts. You can have a page on your website detailing all donation amounts, each using the same widget but a specific amount included in the URL to automatically populate the amount. If you need to prevent the amount from being changed once the widget has loaded this can be done with CSS.

The link generated can now be used in your emails to send from Vega.

> Next, Custom Attributes

Articles in this section

Widget Email Link:

> Next, Custom Attributes

Comments

Articles in this section

Widget Email Link:

> Next, Custom Attributes

Related articles