Overview

The Widget Code section provides the code and links you need to add your Donation Widget to your website or include a personalised donation link in an email.

You can:

• Add your Donation Widget to a webpage using an iframe.
• Adjust the size of the widget to fit your webpage.
• Create a personalised link that pre-fills a donor's information.
• Create a widget for a specific GL Code or Campaign.
• Pre-fill a specific donation amount using a URL parameter.

Important: Embedding the Donation Widget on your website requires access to the webpage's backend or HTML. You may need assistance from your IT team, web developer, or someone who has access to edit your website. Vega Support can't embed the widget code on your website for you.

Open the Donation Widget

1. Go to Admin > Widget Configuration.
2. Find the donation widget you want to use.

3. Select Edit next to the widget name.

4. Select Widget Code from the menu on the left.

Add the Donation Widget to Your Website

Iframe Widget Code

The iframe Widget Code allows you to embed your Donation Widget directly into a webpage.

Copy the iframe code provided in the Widget Code section and add it to the backend or HTML of your webpage.

A typical iframe will look similar to:

<iframe style="width:100%;height:1500px;border:0;" src="https://connect.vega.works/Content/csharp/DonateFormAll.aspx?..."></iframe>

The code includes three main settings:

• Width – Controls how wide the widget appears.
• Height – Controls how tall the widget appears.
• Border – Controls whether a border is displayed around the widget.

The default settings are:

• Width: 100%
• Height: 1500px
• Border: 0

Tip: The iframe dimensions control the space allocated to the widget on your webpage. They don't change the size of the individual fields or buttons within the widget.

Dynamic Iframe Widget Code

The Dynamic Iframe Widget Code is an alternative way to embed your Donation Widget on your website.

When the Dynamic Iframe Widget Code is added to your webpage, it automatically creates the iframe needed to display your Donation Widget. It also passes any parameters included in the parent webpage URL through to the widget.

When to use the Dynamic Iframe Widget Code

The Dynamic Iframe Widget Code is particularly useful when using a personalised Widget Email Link.

It ensures that the personalised parameters included in the link are passed through to the Donation Widget, even when browser restrictions would otherwise prevent those parameters from being used.

For example, this can allow the widget to correctly use personalised information or settings included in a link sent to a supporter.

How it works

1. Copy the Dynamic Iframe Widget Code from Widget Configuration > Widget Code.
2. Add the script to the webpage where you want the Donation Widget to appear.
3. When the webpage loads, the script automatically creates the iframe for the Donation Widget.
4. Any parameters included in the webpage URL are passed through to the widget.

Tip: Use the Dynamic Iframe Widget Code when you are using personalised links and need the parameters from the parent webpage URL to be passed through reliably.

Adjust the Widget Size

You can change the width and height values in the iframe code to suit the layout of your webpage.

For example:

<iframe style="width:50%;height:900px;border:0;" src="https://connect.vega.works/Content/csharp/DonateFormAll.aspx?..."></iframe>

This will display the widget at approximately 50% of the available width and provide 900px of height.

Example: Creating a Compact Donation Widget Reducing the iframe width and height creates a smaller Donation Widget that can fit neatly into a sidebar or smaller area of your webpage. In this example, the reduced height means the donor will need to scroll within the widget to access the entire form.

If the widget is too short

If the height is too small, donors may need to scroll within the iframe to access the entire donation form.

Increase the height until the complete widget can be displayed without unnecessary scrolling.

If there is too much empty space

If there is a large amount of blank space below the widget, reduce the height of the iframe.

Tip: Test the widget on your webpage after changing the dimensions. The ideal size will depend on your website layout and the options enabled on your Donation Widget.

Compact Donation Widgets

A smaller widget can work well when you want to place a Donation Widget in a sidebar or another smaller area of your webpage.

For example:

<iframe style="width:50%;height:450px;border:0;" src="https://connect.vega.works/Content/csharp/DonateFormAll.aspx?..."></iframe>

A compact widget can work particularly well when the Multi-Page Form option is enabled under Form Options.

The multi-page layout breaks the donation process into separate pages, allowing a smaller widget to be used without displaying the entire form at once.

Widget Email Link

The Widget Email Link allows you to create a link that can be included in emails to your supporters.

A personalised link can make donating easier by:

• Pre-filling the donor's existing contact information.
• Using personalised greeting content.
• Using the donor's suggested donation amounts.
• Optionally applying a different GL Code or Campaign.

This can be useful for specific fundraising appeals or campaigns.

Use a Different GL Code or Campaign

You can create another Donation Widget of the same type and assign it a different GL Code and/or Campaign Action.

For example, you could create a separate widget for a specific fundraising appeal.

The iframe code for this widget can then be embedded on a dedicated campaign webpage.

Tip: Using separate widgets with different financial coding can make it easier to report on donations received for specific appeals.

Create a Personalised Email Link

A personalised Widget Email Link allows you to send a supporter a link that automatically fills the Donation Widget with the information stored on their Vega contact.

When the supporter opens the link:

• Their contact information is pre-filled in the widget.
• Any changes they make to their contact information are updated on their Vega contact.
• The donation is matched to the correct contact.

This can make the donation process quicker and easier for existing supporters.

Enter the Container Page

When creating a Widget Email Link, enter the Container Page where the Donation Widget will be displayed.

The Container Page is the webpage on your website containing the embedded Donation Widget.

For example, if your Donation Widget is embedded on your website's Donate page, enter the URL of that page.

Tip: When copying the URL, right-click and select Paste as plain text. This helps prevent hidden formatting from being included in the URL.

Use Different Financial Coding

When creating a personalised Widget Email Link, you can optionally specify a different GL Code or Campaign Action.

This allows you to use the same Donation Widget for a specific appeal while directing those donations to different financial coding.

Personalised Supporter Greeting

Personalised Widget Email Links can use the greeting options configured under Form Setup.

If a personalised greeting has been configured, the selected greeting will be displayed above the Donation Widget.

If no personalised greeting options have been configured, Vega will display the default greeting:

Hello #Salutation#, thank you for your support!

The general greeting document will not be displayed when this default personalised greeting is used.

Personalised Donation Prompts

A personalised Widget Email Link can also use the supporter's suggested donation prompts.

If no donation prompts have been manually configured under Donation Options, the widget will use the supporter's suggested donation amounts as the three donation prompts.

If donation prompts have been manually configured under Donation Options, those prompts will always be used instead.

Important: Manually configured donation prompts take priority over the supporter's suggested donation amounts.

Pre-fill a Donation Amount

You can also use the Widget Email Link to pre-fill a specific donation amount.

Add the following parameter to the URL:

&dtnAmt=XX

Replace XX with the amount you want to display.

For example:

&dtnAmt=50

This will pre-fill the donation amount as $50 when the widget loads.

When to use a pre-filled amount

This can be useful when you have multiple donation opportunities that don't work well as standard donation prompts.

For example, you could have a webpage listing different ways supporters can donate, with each option linking to the same Donation Widget but using a different pre-filled amount.

If required, CSS can be used to prevent the donor from changing the pre-filled amount after the widget loads.

Using the Link in Emails

Once you've generated the Widget Email Link, it can be included in emails sent from Vega.

This allows you to direct individual supporters to a personalised donation form without requiring them to enter their contact information again.

Next steps

Once you've configured your Widget Code, continue with the next section of the Donation Widget setup:

Custom Attributes – Configure additional contact information that can be collected through the Donation Widget.
 

> Next, Custom Attributes

“Some content in this article may have been developed with the assistance of AI tools and reviewed by staff.”