What has changed?
Depending upon your plan, you can now configure your own Branded Web Giving experience straight from the admin portal.
How does it work?
If Branded Web Giving is available on your plan, it will be visible underneath the Settings menu in the admin portal:
The Editor screen
If you have multi-listing level admin or organizational-level access, you can select a listing to edit from the dropdown menu:
You can also switch views with the toggle switch:
Changes will be automatically saved as they are made. Once you are happy with your branding settings, you can Publish these changes to your live giving page.
The Page title can be customised up to 40 characters of text. This replaces the standard options of Give, Pay, or Donate. Changes in the Editor input field will automatically be reflected in the preview.
You can select your primary and secondary colors by entering a valid hex code value into the field, or by clicking the existing color, which launches the operating system's native color picker.
Colors are subject to contrast limits, to ensure they are sufficiently dark to contrast with white and meet accessibility guidelines. If a selected color is too light to pass a 3:1 contrast, you will be prompted to select a darker color.
The Primary color is used for buttons and to indicate selected tabs in the Web Giving experience. The Give one time or Set up recurring (depending on the listing's default setting) and Next buttons in the preview will change as a new Primary color is selected.
The Secondary Color is used as the alternative background in the Web Giving experience if no background image has been set. It is also used for header bars in subsequent screens of the payment experience. If no background image is set, the background in the preview will change as a new Secondary color is selected. If a background image has been set, a header bar will display in the preview for 3 seconds when the Secondary color field is first clicked, and again every time a new secondary color is selected.
Uploaded images are subject to background processing, which automatically scales images to fit our size and dimension requirements.
All images can be uploaded either by dragging an image file and dropping it into the relevant frame, or by clicking browse your files.
The background image should be a minimum of 1500 pixels wide and 420 pixels tall. Anything larger will be resized down to this width or height, and then cropped to correctly fit the frame. For most images, this will mean resizing to 1500 pixels wide, and then having the top and bottom cropped off equally.
An image smaller than either of the minimum dimensions will not be accepted, and you will be prompted to upload a different image.
A 40% mask will also be applied to darken the image and provide better contrast with the white text in the foreground.
Once the image has been processed, it will display in the preview as the background image. If you wish to change your background image, you can clear it from the editor panel and upload another.
Branded logo image
The branded logo is displayed over the top of the background image in the top left corner on desktop and center on mobile. For best results, we recommend you upload a transparent logo. Your logo should be wide and include your organization's name. The minimum dimensions are 40 pixels by 40 pixels up to a maximum displayed width of 250 pixels. Uploaded images that exceed these dimensions will be automatically resized to fit and cropped if the image is too wide.
Once the image has been processed, it will display in the preview as the logo image. If you wish to change your logo, you can clear it from the editor panel and upload another.
The square logo is the image that will be display in the browser tab, also known as the favicon. This image must be square, with dimensions of at least 200 pixels by 200 pixels. Larger images will be resized to fit, and non-square images will be cropped to make them square.
The square logo is not displayed in the preview.