The widget configuration can be accessed from Admin > Widget Configuration, once your event has been created in Engage and the option to Create a Widget is ticked:
Click the Event type to see your existing event widgets with the option to edit any of these and open the configuration:
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:
<iframe style="width:100%;height:1500px;border:0;" src="https://connect.vega.works/content/csharp/events.aspx?rfD3x0k=7A213DB9-4546-4386-B9D7-3651FF0A46C6&xlnse5=3077" referrerpolicy="always" onload="this.contentWindow.postMessage(window.location.href, 'https://connect.vega.works')"></iframe>
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.
Check the sizing on your webpage and if scrolling is needed to access the whole widget, edit again if needed.
For example:
<iframe style="width:50%;height:900px;border:0;" src="https://connect.vega.works/content/csharp/events.aspx?rfD3x0k=7A213DB9-4546-4386-B9D7-3651FF0A46C6&xlnse5=3077" referrerpolicy="always" onload="this.contentWindow.postMessage(window.location.href, 'https://connect.vega.works')"></iframe>
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. Also notice that some of the fields have changed size with this reduction in the widget. The first name and last name fields are now the full width of the widget to make the form easier to use in the smaller size and more visually appealing. These customisations work well when you want to have a small widget on the side of your webpage. |
It can also be used in conjunction with the Multipage option to create a small event widget which doesn't take up a lot of space on the webpage but still allows for easy registrations:
<iframe style="width:100%;height:650px;border:0;" src="https://connect.vega.works/content/csharp/events.aspx?rfD3x0k=7A213DB9-4546-4386-B9D7-3651FF0A46C6&xlnse5=3077" referrerpolicy="always" onload="this.contentWindow.postMessage(window.location.href, 'https://connect.vega.works')"></iframe>
The height needed in your event widget will also depend on the number of ticket options you have to make sure all content is being displayed.
Widget Email Link:
The Widget Email Link allows you to create a personalised GUID 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, without the need to create a brand new widget.
Create a link for an Email to prefill the Widget with a supporter's details:
This personalised link is a great tool to make event registrations even easier for your contacts. 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 and any payment required will be added.
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 specific event 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: |
The link generated can now be used in your emails to send from vega.
Comments
0 comments
Please sign in to leave a comment.