Membership Widget - Widget Code

Overview

The Widget Code section provides the code you need to add your Membership Widget to your website.

You can also create a personalised Email Link to make membership renewals and conversions easier. The Email Link can prefill the widget with a supporter's existing details and can also use different financial settings when required.

Open the Membership Widget

1. Go to Admin > Widget Configuration.
2. Find the membership widget you want to edit.

3. Select Edit next to the widget name.

Please note: If you are creating a new widget, select Create Membership Widget. We recommend starting with the Form Options article in the Membership Widget article series for guidance on setting up a new widget.

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

Add the Membership Widget to Your Website

Iframe Widget Code

The Iframe Widget Code allows you to embed your Membership Widget directly into your website.

Add the Widget to Your Website

Copy the Iframe Widget Code provided in the Widget Code section.

Add the code to the backend or HTML editor of the webpage where you want the Membership Widget to appear.

A typical iframe will look similar to:

<iframe style="width:100%;height:1500px;border:0;" src="https://connect.vega.works/Content/csharp/MembershipAll.aspx?rfD3x0k=0C429EE9-E526-4BF0-807A-C6788A8FF58E&xlnse5=1530"></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 iframe code has a default:

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

Adjust the Widget Size

If the widget is too wide, too narrow, or leaves unnecessary blank space, you can adjust the width and height within the iframe code.

For example:

<iframe style="width:50%;height:900px;border:0;" src="https://connect.vega.works/Content/csharp/MembershipAll.aspx?rfD3x0k=7A213DB9-4546-4386-B9D7-3651FF0A46C6&xlnse5=2055"></iframe>

This example reduces the widget width to 50% and the height to 900px.

Please note: Reducing the height may mean that the entire widget is not visible at once and the member will need to scroll to access all fields.

Customising the width and height can be useful when placing a smaller Membership Widget in a sidebar or another limited area of your website.

Dynamic Iframe Widget Code

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

When the Dynamic Iframe Widget Code is added to your webpage, it automatically creates the iframe needed to display your Membership 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 Membership 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 Membership Widget to appear.
3. When the webpage loads, the script automatically creates the iframe for the Membership 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.

Widget Email Link

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

This can be particularly useful for membership renewals, as the link can prefill the widget with a supporter's existing details.

Create a Personalised Email Link

The personalised Email Link allows you to send a supporter directly to your Membership Widget with their existing contact information already populated.

When the supporter opens the link:

• Their existing contact details will be prefilled in the widget.
• They can review and update their information.
• Any changes they make to their contact information will be updated on their contact record.
• Their membership payment will still be correctly matched to their contact.

This can make membership renewals and conversions easier for both your organisation and your supporters.

Enter the Container Page

1. Enter the Container Page where the Membership Widget will be displayed.
2. This should be the webpage on your website where the Membership Widget is embedded, such as your membership sign-up or renewal page.

Please note: When copying the Container Page URL, right-click and select Paste as plain text to avoid any hidden formatting being included in the URL.

Use Different Financial Information

The Email Link also allows you to include a different GL Code or Campaign when generating the link.

This means you can use the same membership widget while directing payments from a particular email campaign or renewal activity to different financial coding.

Personalised Supporter Greeting

The Email Link will use one of the personalised supporter greeting options configured under Form Setup.

If neither personalised greeting option has been selected, the following default greeting will be displayed above the widget:

Hello #Salutation#, thank you for your support!

The general greeting document will not be displayed when using the personalised Email Link.

Use the Email Link

Once the Email Link has been generated, you can copy it and include it in your emails to supporters.

When the supporter clicks the link, they will be taken to the Membership Widget with their existing details prefilled.

This provides a simple way to encourage members to renew their membership while reducing the amount of information they need to enter manually.

Next steps

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

Custom Attributes – Add additional fields to your Membership Widget to collect information specific to your organisation.

> Next, Custom Attributes

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