Engaging Networks: Creating donation pages 2021

Please read!

To keep the page speed high, please read our advice in introduction point (5) below
Extended modules are all text blocks, excluding victories which remains a code block
Each extended modules must sit in it's own one-column row (you will see this in your template pages)
The secure module is broken up into two text blocks, in a simple two-column row
Amounts on the Gift Impact (shopping list) buttons are automatically pulled from the form on the page
Styles are visible in EN pagebuilder when you are editing, this is a helpful visual reference but do not rely on it being accurate of the front-end, especially dynamic content

Introduction

This guide explains how to use our new Engaging Networks donate page templates. It is designed to be used alongside the EN training videos that cover the use of pagebuilder in much more detail.

00:04:34 Template overview and getting started
00:21:02 Duplicating the template and naming
00:23:00 Page settings
00:28:00 Editing the H1 title overlay
00:29:42 Editing the header image
00:32:58 Editing title and content above the form
00:36:41 Editing content under the form
00:43:36 Below the fold content panels
00:50:00 Removing content rows
00:51:12 Gift impact module
00:54:13 Testimonial module
00:56:00 Editing thank you page 2
00:58:40 Side menu - social details
01:02:00 Adding a target donation counter
01:09:56 Autoresponder thank you emails

Before you scroll past, please read these very important notes:

1. Custom classes

This guide will reference using classes in content blocks. This is done here via the paint pallet icon:

Adding custom classes

A single class will not contain a space, a hyphen is used between words in a single class. When adding multiple classes these are separated with a space, e.g. 'donation-values-grid donate-panel'

Classes that you may want to use:

'regularGiftOnly' - this will only display the content when ‘monthly’ is selected on the form

'singleGiftOnly' - this will only display the content when ‘single’ is selected on the form

2. Shared library components

When adding a shared component from the library and making any changes, you need to 'unlink' the page from the library before making any edits. This will ensure that you don't impact the other pages where the shared block is in use. Unless you want to make a change across all of your pages in one go, then there is no need to unlink the block.

Unlinking components from the library

3. Form fields

Forms fields should never be ticked as 'mandatory' in EN. We have our own script that determines which fields are mandatory, and in which scenarios they should be so, based on rules determined by country/payment method combinations.

Please ask the Digital Team if you need to make any changes to mandatory fields on your donation pages.

Validation

Our action forms use enhanced validation through JavaScript. Our script disables any validation set by Engaging Networks provides in order to do this. Fields in donation forms should not have any EN validators.

Field type

Donation form fields should only be edited by the Digital Team. Fields must be of the following type:

Field	Type
First name	Text
Last name	Text
Address 1	Text
Address 2	Text
City	Text
Region (if applicable)	Select
Country (this must have a top row with label 'Country' or the translation of, with the value field empty. This will show if there is any delay in IP detection. There should be no default country selected)	Select
Postcode	Text
Email	Email
Phone number	Text
Card or Direct Debit/IBAN/Fiscal Code fields/Bank account Type (iDEAL)	Text
DD start date	Uneditable text

4. Images

When adding images to your pages, please follow these steps to ensure that your images don't cause your page to load slowly.

Ensure the images are sized correctly (see required dimensions for each module in the relevant sections below), don't just grab the image URL from EN or Umbraco.
Ensure that all images are JPG format, PNG can be used on occasion for logos.
You should not compress images before uploading them to Engaging Networks, but do resize them.

Upload images to the library folder in Engaging Networks by going to Pages >Components. This takes you straight to the image library.

Select a folder to save the new image into from the dropdown menu and click "UPLOAD" to upload new images. If an appropriate folder doesn't already exist create one.

Select any uploaded image to locate and copy the url and add alternative text.

It’s important to give all images an Alt tag name both in Engaging Networks library and in the source code of the content block. Alt descriptions should describe how the image looks. In the case that someone could not see the image they would know what it was by reading the alt description. Giving images Alt descriptions also improves SEO (search engine optimisation).

Paste the copied url of the image directly into the HTML source code of the block using an image in the content block. Locate the src=url part of the code and replace the template https address. Don't forget to also update the alt text here too.

5. Page performance

Here are some way in which you can keep your pages loading quickly and providing a good user experience. Why is page speed so important for your conversion rates? More info can be found in our site speed guidelines.

Whilst there there is a video overlay available for your donation pages, we do not recommended that you include video because this brings the page speed down significantly
GIFs should be used sparingly and should always be compressed when they are used - max size 200kb. They should never be used as a header image - they are not accessible as you cannot pause them, they are distracting and can impact page conversion .
Avoid embedding iframes - these come with security risks and are slow to load, resulting in a poor user experience.
Images should be JPG format, optimal for web and smaller than PNG
Do not leave sections of commented-out code on the page
When linking to external sites, the <a> tag should include the attribute rel="noopener" and links should always start with https. This improves our site security because it prevents the opening page to gain any kind of access to the our pages page. In turn this impacts our Google score. These are already included in your library block code for share links.
Do not add any custom styles. Not only do inline styles impact page speed, our pages are designed inline with our brand guidelines and should not be customised (this includes colours, text alignment, background colours etc). Please discuss with us if you would like to make a change.

6. Other donation template types

In your account you will have a standard donation page template and a monthly-focused donation template. It is also possible to have a monthly-only, single-only and single-focused page. These templates are only to be used on a case-by-case basis. The decision to use one of these must be signed off by GIG, then you should request the template from the Digital team via Salesforce and include confirmation from GIG.

Digi team: notes on the above can be found in our OneDrive.

Donation landing page creation

As you create your pages, you must add it to the Engaging Networks Pages spreadsheet here.

There are two types of donation page available - a standard page and a monthly focused page. To create a new donation page, duplicate the relevant template page in your library, do not create a page from scratch.

Standard & monthly focused forms

Below the form on these pages, are the extended modules. Typically, you will only need to make edits to the components in the top section of pagebuilder editor, as shown below:

Donate page 1 back-end vs front-end

NB: in the page settings, the 'notes' box should be used for a relevant public-facing summary of the page.

Page Settings

When you create your duplicated page, make sure you complete the page settings using the cog icon. They should look similar to this.

Donation page settings

Name: this is for our use only and should be named clearly so that the page can be easily identified in EN

Public Title: the text that appears in the browser tab. This should be short and engaging. This should be written in sentence case and never all uppercase

Notes: this should always be filled in with a short summary of the page call to action and is what search engines will display in result listing

Session validation: should be ticked

Page 1 - Image, Title, Video

Page title

Library block: Donate page title

The title text block requires the classes 'hero-title parent-1-col-lg-7 parent-3-container-fluid parent-3-p-0'

This sits at the top of the left-hand column and must always be present on the page or the layout will break.

If want to force the point at which the title moves to a new line, you will need to edit it within the source HTML. Insert the following line break with classes at the point at which you want a new line to being <br class="d-none d-lg-block" /> .

Title overlay

Background image

This image block sits below the title block, it must have the class 'hero-image' and the dimensions must be:

Width = 100 % , Height = auto

Background Image Settings — Main page background image

The background image must have: minimum height 1200px, minimum width of 1200px and a maximum width of 1600px. The minimum dimensions are important for quality, the maximum dimensions are important for page load speed. Remember to minify your images before uploading!

The background image display is responsive, meaning that it will re-size depending on the screen size of the device that the page is viewed on.

By default the image has a centred vertical alignment. It is best to use images where the main subject of the image is not towards the edge of the frame. However, you can choose to top or bottom align the background image using these classes:

background-bottom background-top

Background image vertical alignment

Class 'background-bottom' will push the image up and you will see more of the bottom of the image.

Class 'background-top' will push the image down and you will see more of the top of the image.

This class should be added here, you should end up with two classes in the image class field (hero-image background-top/bottom)

Where to add the background images classes

Remember to always include alternative text for visually impaired supporters. This should be descriptive of what the image is portraying. e.g. "Piglets in a crowded barn with a slatted concrete floor."

Do not use images with text overlaid. The template allows for text overlays where appropriate or use of captions.

Video overlay

Library block: Donate Video overlay

Video panel

NB adding a YouTube video to your page will negatively impact the page speed and performance, and therefore will have an impact on the page conversion rate.

If you wish to include a video on the page, add a new on-column row to your page, drag a code block in, and then load the 'Donate Video overlay' code block from your library. It will automatically display over the background image on the right-hand side.

Unlink it from the library and swap out the URL for the video you need.

When using a youtube video, you need to use the URL https://www.youtube.com/embed/HDGL5cA3VmU where the final section in italics is the ID of the video that you swap in.

Video panel code block

Page 1 - Donation form

Text above the donation form

Library block: Text above donation form

This text box must be the first component in the right-hand column and requires the following classes: 'hero-text p-3 px-md-5 parent-1-col-lg-5 parent-1-d-flex parent-1-flex-column parent-1-py-xl-5'.

This must be an H2 or paragraph text. Do not change any of the default styles. Keep any text here short to avoid pushing the donate form down the page.

Below this is the form block, which differs depending on the page type you are using. Changes to the forms should only be made by HQ Digital team.

Notes for Digi team:

the email field must be type = email
the country select list must include 'Select country' as the first option in the list. 'Select country' goes in the label column field, the value column field must be blank. (Translations for this come from our json files)
the country field should not have a default country selected, this is done using IP addresses

Standard donate form

When creating a page you should always copy an existing page and edits to any components mentioned in this section should only be made by the Digital team.

Standard donate form set up

Monthly/Single question

Library block: Recurring gift - Default monthly and Recurring gift - Default single

Your template page defaults to monthly using 'Recurring gift - Default monthly'. If you want the form to default to Single instead then edit the block, click 'load from library', and load in 'Recurring gift - Default single' instead. Do not unlink either of these from the library.

This form block needs the class 'donate-panel' with label position = above field. This uses the recurring payment question and should have no label text.

Monthly/Single conditional text

Library block: Monthly/single conditional text

This allows you to insert different text to display on the monthly and single tabs. This text block needs the class 'donate-panel'. Edit the content within the source HTML to ensure that the single-only and monthly-only classes are not deleted.

Monthly/Single conditional text code

Donation amount questions

Library block: Donation amount grid

This form block must have the classes 'donation-values-grid donate-panel' and label position = 'above field'. The submit button must be enabled.

Donation pop-up 1 (details, payment method and hidden fields)

This form block 'Donation amount grid' must have the class 'popup--1'

Donation pop-up 2 (Card details/DD details)

This form must have the class 'popup--2' applied

Direct Debit Guarantee

This text block must have the classes 'popup--2 dd-guarantee'

Direct Debit confirmation

This text block must have the classes 'popup--2 dd-review'

Gift Aid (UK only)

This form block must have the classes 'popup--2 gift-aid'

Monthly-focused form

Monthly focused form set up

Monthly/Single question

Library block: Recurring gift - monthly focused

This is the only block that needs to be different - the form block needs the classes 'donate-panel parent-1-donate-panel-slider' with label position = above field. This uses the recurring payment question and should have no label text.

If you want to change a standard page to a monthly page easily, you can simply swap this library block.

Text block below the form

Library block: Text block below donation form

Gift impact underneath form

This text block has the class 'donate-panel pb-lg-4 no-donate-panel-slider'. Always edit the text and image URL within the source HTML.

Gift impact underneath form code

Images for this panel should be uploaded 375px wide

Phone number collection

*If the phone field impact on conversion rate has been tested on your pages*

How it works on the front end

The phone field only displays if the country selected in the forms matches the EN account that the page is from, e.g. if someone in the UK is on a Dutch page, they will not be aske for their phone number.

For email/warm audience: The phone field only shows if an existing supporter has not given us a number before

For leadgen/cold audience: The phone field always shows (if country matches the page as above)

The opt-in logic (different per market):

US and NL: Phone opt-in and SMS opt-in are never visible to the supporter. If a valid mobile number is given, SMS and Phone are set to Y in the back-end. If a valid landline number is provided, only the Phone opt-in is set to Y.

FR: Phone opt-in is never visible to the supporter. If a valid mobile number is provided, Phone opt-in is set to Y in the back-end, SMS opt-in becomes visible. If a valid landline number is provided, Phone opt-in is set to Y in the back-end.

All other markets: If a valid mobile number is entered, Phone and SMS opt-ins become visible. If a valid landline number is entered, only the Phone opt-in becomes visible.

How it works in the back-end

IMPORTANT: Do not just drag the phone number field into the existing form. If you are not confident with the below, make a digital case and we can do this for you.

To include the phone number field on the page:

Locate the form block 'Donation form popup 1'
Click the pencil icon then load from library, replace it with 'Donation form popup 1 - PHONE' from the library and click save. Do not unlink this form from the library.

The library form is required because it must be set up in a specific way:

The phone number field must be type = text
The phone number field must be non-mandatory in the form (even if you want to make it mandatory - more on this below)
Both the phone and SMS opt-in questions must be included on the form, even if you are one of the markets where these opt-ins will be hidden from supporters
If the block is unlinked from the library, we will not be able to easily make any important or necessary changes to all of your donation pages at once.

The phone number field in the library form will be non-mandatory. If you would like to make it mandatory, do not make the field mandatory in the form block, instead:

Add a new code block to the bottom of your page
Click the pencil icon and then load from library, load in the code block 'Variable - Phone Mandatory' and click save. Do not unlink this from the library.

Extended page modules

NB: Each extended page module must be in it's own one-column row.

These modules are all saved in your components library, most of them are text blocks, one (victories) is a code blocks. They should all be edited in the source code. If you are familiar with editing <p> tags and replacing image URLs within HTML then you should have no issues editing the text and image content of these blocks.

Text panel

Library block: Donate grey text panel / Donate white text panel

Grey text panel

If you have extra text content to add below the form, use the text block component (in a one-column row) and load one of the blocks from your library: 'Donate grey text panel' or 'Donate white text panel', the colours refer to the background of the panel.

The white text panel requires classes 'parent-3-bg-white parent-3-container-fluid bg-white'

The grey text panel requires classes 'parent-3-container-fluid'

Ensure that you only edit <p> or <h> tags. Make sure that you leave the orange <div> tags in place and notice the title style class in yellow.

Grey text panel code

Text panel with image

Library block: Donate grey text panel with image / Donate white text panel with image

White & grey text panels with image

Text panel with image code

These text blocks work the same as the text panels above, they need the same classes. They have an additional section of code to include an image on the right of the text. As above, use the text block component and load the text block called 'Donate grey text panel with image' or 'Donate white text panel with image'.

Images for this panel should be uploaded at 500px wide

To change the image just swap with image URL, remember to update the alt text.

Two-column text panel

Library block: Donate grey 2-col text panel / Donate white 2-col text panel

Two column text panel

These text blocks are similar to the text panels above, they need the same classes but have a different column structure. The content in these panels will display as two columns on desktop/tablet and will stack as single columns on mobile. On mobile the left-hand column will come first.

Use the text block component and load the text block called 'Donate grey 2-col text panel' or 'Donate white 2-col text panel'. You can remove or move the image code, make sure that you move or remove all of the image code div (see below) and ask us if you are not sure, we will be happy to change the layout for you.

<div class="my-auto pb-3"><img alt="Cows" class="mx-auto d-block img-fluid" loading="lazy" src="https://www.ciwf.org.uk/media/7434003/farm-animals-cows-header.jpg" width="600" /></div>

Images for this panel should be uploaded at 600px wide

To change the image just swap with image URL, remember to update the alt text.

The red line below shows you where the left-hand column ends and the right-hand one begins within the code.

Two column text panel code

Pop-up messages

Add a link to any text on the page to display the email or petition text in a pop-up. You can have multiple pop-ups on a page.

To create the pop-up link:

Surround the text to open the pop-up with this <a> tag: <p>Read the message <a class="open-modal" data-modal-class="modal-1" href="#"> here</a></p>

To create the connected pop-up:

Below your final extended panel, add a one-column row, add a text block and load 'Donate Pop-up message 1'. This includes the class 'modal-1' which matched the class in link and connects it.

To create more pop-ups:

Follow the same steps as above, but in the link replace the final '1' in 'modal-1' for '2' and then '3' and so on <a data-modal-class="modal-2" href="#"> , <a data-modal-class="modal-3" href="#">

Add another pop-up text block, unlink it from the library and change the class in the paint pallet section to modal-2 and modal-3 etc to match the <a> class respectively. Follow this pattern to create more, or ask the Digital Team.

Pop-up Content

Pop-up modal

In a pop-up you can include lists, horizontal rules, H1, H2, H3, images, text links and button links. The 'Donate Pop-up message 1' library block has examples of all of these that you can copy.

The styles shown in this example are applied by default, excluding the image display and buttons, which require specific code:

Images

To display an image and text as shown, use the following code and replace the image URL and text. The image width can be increased or decreased, remember to consider mobile display first!

<div class="clearfix mb-4 d-flex align-items-center"><img class="float-left pr-5 loading="lazy"" src="https://assets.ciwf.org/media/7440956/friends-of-the-sea-logo-436x436.jpg" width="150px" />
<p>Friend of the Sea certification labelling scheme</p>
</div>

If you need help with alternative image layouts please ask the Digital team.

Button code options

Close pop-up and go to anchor link on page

center aligned: <div class="clearfix my-4 d-flex justify-content-center"><a class="btn btn-primary text-uppercase" data-dismiss="modal" href="#anchor1">Close modal & go to anchor</a></div>
left aligned: <div class="clearfix my-4"><a class="btn btn-primary text-uppercase float-left" data-dismiss="modal" href="#anchor1">Close modal & go to anchor</a></div>
right aligned: <div class="clearfix my-4"><a class="btn btn-primary text-uppercase float-right" data-dismiss="modal" href="#anchor1">Close modal & go to anchor</a></div>

Close pop-up

center aligned: <div class="clearfix my-4 d-flex justify-content-center"><a class="btn btn-primary text-uppercase" data-dismiss="modal" href="#">Close modal</a></div>
left aligned: <div class="clearfix my-4"><a class="btn btn-primary text-uppercase float-left" data-dismiss="modal" href="#">Close modal</a></div>
right-aligned: <div class="clearfix my-4"><a class="btn btn-primary text-uppercase float-right" data-dismiss="modal" href="#">Close modal</a></div>

Link to another page

center aligned: <div class="clearfix my-4 d-flex justify-content-center"><a class="btn btn-primary text-uppercase" href="https://www.ciwf.org.uk" target="blank" rel="noopener">Link to another page</a></div>
left aligned: <div class="clearfix my-4 d-flex"><a class="btn btn-primary text-uppercase float-left" href="https://www.ciwf.org.uk" target="blank" rel="noopener">Link to another page</a></div>
right aligned: <div class="clearfix my-4 d-flex"><a class="btn btn-primary text-uppercase float-right" href="https://www.ciwf.org.uk" target="blank" rel="noopener">Link to another page</a></div>

Go to anchor link within pop-up

center aligned: <div class="clearfix my-4 d-flex justify-content-center"><a class="btn btn-primary text-uppercase" href="#1A">Go to pop-up anchor</a></div>
left aligned: <div class="clearfix my-4"><a class="btn btn-primary text-uppercase float-left" href="#1A">Go to pop-up anchor</a></div>
right aligned: <div class="clearfix my-4"><a class="btn btn-primary text-uppercase float-right" href="#1A">Go to pop-up anchor</a></div>

Accordion

Library block: Donate Accordion x 4

Accordion panel

NB this uses some different code to the action page accordion, use the correctly named block for each page type.

Use the text block component (in a one-column row) and load the text block Donate Accordion x 4 from your library. See highlighted below where to edit the green heading of the accordion panel, and where to find the <h4> tag for the item titles.

If you would like to include images in an Accordion please ask Digi and we will add the code for you..

Accordion code

To add more accordions, you can ask the Digital team or follow the guide below. It's easy to put the code in the wrong place, so please just ask if you are unsure.

The first accordion begins on line 10 with the '<h4 aria-controls...' , and it finishes with a closing div </div> on line 16. Each accordion is structured the same, the red line shows where the first one begins and ends.

You have a library block with four accordions, to add a 5th, 6th, 7th accordion, copy and paste the code below after the first </div> at the end of the code, before the other </div>s below. The code in bold is the only code that changes.

Accordion code

<h4 aria-controls="petitionFive" aria-expanded="false" class="text-uppercase mb-4 collapsed" data-target="#petitionFive" data-toggle="collapse">Caging animals causes immense suffering 6</h4>

<div aria-labelledby="headingOne" class="accordion-body collapse" id="petitionFive">
<div class="mb-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus dolor ac volutpat aliquam. Morbi eu nulla urna. Sed accumsan nunc sed turpis consectetur, nec consectetur dolor rhoncus.</p>

<p>Morbi accumsan ut orci sed vehicula. Pellentesque eget laoreet lacus, at varius tellus. Fusce non sem vel lectus commodo suscipit. Sed ultricies consectetur dolor, quis pharetra lacus.</p>
</div>

<h4 aria-controls="petitionSix" aria-expanded="false" class="text-uppercase mb-4 collapsed" data-target="#petitionSix" data-toggle="collapse">Caging animals causes immense suffering 7</h4>

<div aria-labelledby="headingOne" class="accordion-body collapse" id="petitionSix">
<div class="mb-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus dolor ac volutpat aliquam. Morbi eu nulla urna. Sed accumsan nunc sed turpis consectetur, nec consectetur dolor rhoncus.</p>

<p>Morbi accumsan ut orci sed vehicula. Pellentesque eget laoreet lacus, at varius tellus. Fusce non sem vel lectus commodo suscipit. Sed ultricies consectetur dolor, quis pharetra lacus.</p>
</div>

<h4 aria-controls="petitionSeven" aria-expanded="false" class="text-uppercase my-4 collapsed" data-target="#petitionSeven" data-toggle="collapse">Caging animals causes immense suffering</h4>

<div aria-labelledby="headingOne" class="accordion-body collapse" id="petitionSeven">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus dolor ac volutpat aliquam. Morbi eu nulla urna. Sed accumsan nunc sed turpis consectetur, nec consectetur dolor rhoncus.</p>

<p>Morbi accumsan ut orci sed vehicula. Pellentesque eget laoreet lacus, at varius tellus. Fusce non sem vel lectus commodo suscipit. Sed ultricies consectetur dolor, quis pharetra lacus.</p>
</div>

Gift impact

Library block: Donate Gift impact

Important! Use image URLs from Umbraco

Gift impact - shopping list panel

This panel is a text block called 'Donate gift impact' in your library, and must be in it's own row. It must be edited within the source code. Don't rely on the display in EN page builder to be accurate because it cannot be dynamic, check your page on the front end instead.

This panel works in sync with the donation form. If the monthly tab is selected on the form, the buttons on this panel will inherit the monthly amounts from the form automatically, and will open the pop-up for a monthly donation. If the single tab is selected, the same happens with the single amounts in the form on that page.

You have the option to change the text and images that are displayed for single and monthly. Keep the text short for optimal mobile display.

Title

To edit the title of this section, you need to find the <h2> tag in the code with the class 'title'.

Code for shopping list title

Panels

The image below displays all the code that makes up one panel, for each panel you have content for single and content for monthly. Highlighted in yellow is the location of the single content, highlighted in orange is monthly.

Code for each impact panel

Button text

You can edit the word on the button ‘donate’, in the code underlined in green above.

<button class="btn btn-secondary btn-lg text-uppercase" tabindex="0" type="button">Donate <span class="btn-price"> </span><span class="btn-text"> </span></button></div>

Overlay text

Keep this text short for optimal mobile experience. To edit the individual overlay text for each image, you will need to edit the <h2> tags and <p> tags for each panel, for both monthly and single.

Code for overlay text on panel

Images

You will see that there are two locations in the code for each box for the image URL, this is because we need two different sizes for device displays (rectangular and square).

Gift impact - desktop & mobile

Code for editing the gift impact images

srcset within <source> = desktop image crop

src within <img> = mobile image crop

Image URLs

For the Umbraco images, use the first URL in the Image tab.

The image needs a minimum width 700px and height 1060px.

After the URL you need to include the parameters:

?anchor=center&mode=crop&width=700&height=1060 for the first <source> URL (desktop)

?anchor=center&mode=crop&width=700&height=700 for the second <img> URL (mobile)

Remember to always minify images before uploading, using TinyPNG/TinyJPG.

Victories

Library block: Donate Victories module x 2 / Donate Victories module x 3

This is the only panel that is a code block, remember to add it to the page in it's own row.

Victories module

The location of the text for slide 1 and slide 2 in the HTML is highlighted below:

Victories module code

To edit the images, swap in the URLs.

Remember to always minify images before uploading, using TinyPNG/TinyJPG .

For Umbraco images, you need to use the URL from the info tab, not the url that contains 'assets' e.g. https://www.ciwf.org.uk/media/7434644/istock_70872399_xxlarge.jpg

After the URL you need to include the crop details: ?center=0.48,0.4&mode=crop&width=790&height=460&quality=70

Remember to update the alt text.

Images for this panel should be uploaded at 800px wide

Testimonials

Library block: Donate Testimonial x 4 / Donate Testimonial x 1

Important! Use image URLs from Umbraco

This is a text block, remember to add it to the page in it's own row.

It requires the classes "parent-3-container-fluid parent-3-bg-white"

Testimonial module

Title, Quote and Author name

To edit these see highlighted in order - title, quote, name

Testimonial module code - Title, Quote & author

Images

To edit the images, swap in the image URL.

Remember to always minify images before uploading, using TinyPNG/TinyJPG .

For the Umbraco images, use the first URL in the Image tab.

After the URL you need to include the crop details: ?anchor=center&mode=crop&width=337&height=337

Remember to update the alt text.

Images for this panel should be uploaded at 200px wide

CTA and button text

Testimonial CTA text

Testimonial code - CTA and button

Donate button amount

This panel works in sync with the donation form. The amount on the button will display the default single or monthly amount from the form, depending on which tab is selected.

If the monthly tab is selected on the form, the button will open the pop-up for a monthly donation. If the single tab is selected on the form, the button will open the pop-up for a single donation.

Trust

Library block: Donate Trust

This is a text block, remember to add it to the page in it's own row.

It requires the class 'parent-3-container-fluid'

Trust panel

This block is made up of two columns of content. The titles are found in the <h2> tags, and the other content within the <p> tags.

Security

This is made up of a two-column row and two separate text blocks. 'Donation secure' and 'Privacy respected'

They both need the same classes 'pr-lg-5 py-5 text-panel parent-1-col-lg-6'

Secure panel

These are very simple to edit, titles are in the <h2> tags, the rest of the content will be in <p> tags or <img> tags

Image Credit

Library Block: Image Credit

If you need to include credit for any images on your page add a new row after the final "extended module" on your page. Then drag the library text block "Image Credit" into that row, unlink and edit it to include the credit with a simple <p> paragraph tag. The image copyright symbol displays automatically on the left of the text.

Image Credit on Donation Pages

Share buttons

These library modules are for page 1 only, please use the appropriate ones for each page and specific location. Please find all share button code options for page 1 and 2 in the share button code section.

Share button options

Share buttons in your library

To swap in an email button, please see here

These panels are added as text blocks separate to other modules, do not copy and paste the code into another module. They are saved in your libraries, there is a different panel for each location and background colour.

Share button block

If you would like to have text > buttons > text above the donation form, all of this code will need to be included in one text block for the layout to look correct. To do this, you would include your first piece of text, then paste the chosen share code, then add the following text below that. E.g

<h2>Please tell your friends and family</h2>

<div class="px-5 social-links row text-uppercase mb-4">
{the rest of share code here}
</div>

<h2>You can end animal suffering</h2>

Reference the email building guide for notes on how to create share messages for sharing buttons.

Email building guide

Donation thank you page

On this page, modules must be kept in the same order or the display of the page will break.

Donation page 2 front-end vs back-end

Conditional thanking data

Dynamic buttons in the RTE

You can use the dynamic buttons user_data and donation_data to display conditional thanking content on the page.

The Insert User Data button allows you to insert user data, such as first name (e.g. Thanks, Georgie for donating!). Due to the variety of donation methods we offer, we use a custom user data field to refer to the frequency of a donation. The 'Thanking' - 'user-data~Thanking' option will display 'monthly' or 'single' based on the frequency of the donation made.

The Insert Donation Data allows you to insert data once a donation has been made. Such as 'Amount' - {receipt_data~amount~[en1]}.

Your {user_data~Thanking} gift of {receipt_data~amount~[en1]} means a lot to the fight against factory farming = Your monthly/single gift of £X means a lot.

There are different receipt_data~amount options depending on your country's currency and formatting.

Page 2 -Background image

The background image sits in an image block, in a one-column row at the top of the page. This image block must have the classes 'hero-image position-static parent-4-container-fluid'

Thank you page background image

Width = 100 % , Height = auto

The background image must have a minimum width of 1400px.

On large screens, i.e. desktop computers, the full width of the image will display. The maximum display height is 700px, so if your image is taller than this it will be cropped on the top and bottom.

Remember to always include alternative text for visually impaired supporters.

Page 2 Components - Left-hand column

These text blocks sit in the following order in the right-hand pagebuilder column:

Library blocks: Donate TY page - donation details > Donate TY page - about > Donate TY page - contact

These three panels are text blocks. The first one, donation details, needs the classes 'parent-1-col-lg-6 parent-1-py-6 parent-1-order-last parent-1-order-lg-first'

The other two panels do not require classes, but you must keep them in the same order and edit any text within the source HTML. The content needs to remain within specific divs, in order to keep everything within the correct column and cards.

Left hand thank you panels

In the contact block you can either include a button link, or linked email address:

Email:

<div class="row text-uppercase mt-5">
<div class="col-5">
<h4 class="text-gray">By email</h4>
</div>

Button:

<div class="row text-uppercase mt-5">
<div class="col-5 mb-3">
<h4 class="text-gray">By email</h4>
</div>

<div class="col-7 mb-3">
<a class="btn btn-primary text-uppercase mt-n2 px-3 font-size-6" href="mailto:xxx@CIWF.org">Contact Us</a>
</div>
</div>

Page 2 Components - Right-hand column

Donation thank you - sticky module.

Library block: Donate TY page - thank you & share

Thank you page sticky panel

This text block must have the classes 'sticky-element parent-1-col-lg-6 parent-1-pt-6 parent-1-pb-lg-6 parent-1-order-first parent-1-order-lg-last parent-1-shifted-up parent-4-bg-white parent-3-container parent-3-px-3 parent-2-justify-content-center'.

Always edit this in the source HTML.

Title

The title text should be divided like this:

Editing the title

Share links

To edit the share links, simply replace the encoded URLs:

Editing the share links

You have four social options for share buttons, Facebook, Twitter, Email and Whatsapp. There are a few different layout options. The code for all of this is below (excluding share buttons for text panels which are in your libraries). If you need any adjustments made to the existing code, please ask Digi.

All options for share button code are below

NB These layouts are for desktop - all options below will be stacked on mobile. Share buttons contain empty alt tags as the icons are decorative.

Share button code

Row of 3 buttons with text

<div class="px-5 social-links row text-uppercase mb-4">
<div class="col-md-4"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

<div class="col-md-4"><a class="twitter" href="https://twitter.com/intent/tweet?text=I%20just%20helped%20farmed%20animals%20by%20donating%20to%20%40CIWF_USA.%20Will%20you%20do%20the%20same%3F%20http%3A%2F%2Fbit.ly%2F2BxKClx%20%23Compassion" rel="noopener" target="_blank"><img alt="" class="mr-1" height="20" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-twitter-white.svg" width="25" />Tweet</a></div>

<div class="col-md-4"><a class="whatsapp" href="https://api.whatsapp.com/send?text=Ik%20help%20de%20dieren%20en%20heb%20zojuist%20gedoneerd%20aan%20Compassion%20in%20World%20Farming!%20Dieren%20in%20de%20vee-industrie%20verdienen%20een%20veel%20beter%20leven%20en%20verre%20veetransporten%20moeten%20worden%20verboden.%20Help%20jij%20ook%20mee%3F%20https%3A%2F%2Fbit.ly%2F2XX9mSJ" rel="noopener" target="_blank"><img alt="" class="mr-1" height="20" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-whatsapp-white.svg" width="23" />Share</a></div>
</div>

To swap in email:

Row of 3 buttons - icons only

To swap in email:

Grid of 4 buttons with text

<div class="px-5 social-links row text-uppercase mb-4">
<div class="col-md-6"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

<div class="col-md-6"><a class="twitter" href="https://twitter.com/intent/tweet?text=I%20just%20helped%20farmed%20animals%20by%20donating%20to%20%40CIWF_USA.%20Will%20you%20do%20the%20same%3F%20http%3A%2F%2Fbit.ly%2F2BxKClx%20%23Compassion" rel="noopener" target="_blank"><img alt="" class="mr-1" height="20" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-twitter-white.svg" width="25" />Tweet</a></div>

<div class="col-md-6"><a class="whatsapp" href="https://api.whatsapp.com/send?text=Ik%20help%20de%20dieren%20en%20heb%20zojuist%20gedoneerd%20aan%20Compassion%20in%20World%20Farming!%20Dieren%20in%20de%20vee-industrie%20verdienen%20een%20veel%20beter%20leven%20en%20verre%20veetransporten%20moeten%20worden%20verboden.%20Help%20jij%20ook%20mee%3F%20https%3A%2F%2Fbit.ly%2F2XX9mSJ" rel="noopener" target="_blank"><img alt="" class="mr-1" height="20" src="https://engn.ciwf.org/dist/assets/images/icons/icon-whatsapp-white.svg" width="23" />share</a></div>

<div class="px-5 social-links row text-uppercase mb-4 mt-5">
<div class="col-md-4"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

Stacked buttons

<div class="social-links row text-uppercase mt-4">
<div class="col-md-12"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

<div class="col-md-12"><a class="twitter" href="https://twitter.com/intent/tweet?text=I%20just%20helped%20farmed%20animals%20by%20donating%20to%20%40CIWF_USA.%20Will%20you%20do%20the%20same%3F%20http%3A%2F%2Fbit.ly%2F2BxKClx%20%23Compassion" rel="noopener" target="_blank"><img alt="" class="mr-1" height="20" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-twitter-white.svg" width="25" />Tweet</a></div>

<div class="col-md-12"><a class="whatsapp" href="https://api.whatsapp.com/send?text=Ik%20help%20de%20dieren%20en%20heb%20zojuist%20gedoneerd%20aan%20Compassion%20in%20World%20Farming!%20Dieren%20in%20de%20vee-industrie%20verdienen%20een%20veel%20beter%20leven%20en%20verre%20veetransporten%20moeten%20worden%20verboden.%20Help%20jij%20ook%20mee%3F%20https%3A%2F%2Fbit.ly%2F2XX9mSJ" rel="noopener" target="_blank"><img alt="" class="mr-1" height="20" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-whatsapp-white.svg" width="23" />Share</a></div>
</div>

To add or swap in email:

Row of 3 buttons - icons only

To swap in WhatsApp:

Row of 3 buttons with text

<div class="social-links row text-uppercase mt-4">
<div class="col-md-4"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

To swap in email:

Grid of 4 buttons with text

<div class="social-links row text-uppercase mt-4">
<div class="col-md-6"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

<div class="col-md-4"><a class="facebook" href="https://www.facebook.com/share.php?u=https%3A%2F%2Fdonate.ciwf.com%2Fpage%2F12128%2Fdonate%2F1%3Fsupporter.appealCode%3DAPFB_US1217%26utm_campaign%3Dfundraising%26utm_source%3Dsharedciwffb%26utm_medium%3Dfacebook" rel="noopener" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-facebook-white.svg" width="11" />Share</a></div>

If you want to include an Instagram button asking people to follow your account (not share, this is not currently possible), then you can use the below code, please ask if you need help including this in your content

With text:

<div class="social-links row text-uppercase mt-4"><div class="col-md-4"><a class="instagram" href="https://www.instagram.com/ciwf" target="_blank"><img alt="" class="mr-1" height="21" loading="lazy" src="https://engn.ciwf.org/dist/assets/images/icons/icon-instagram-white.svg" width="21" />Share</a></div></div>

Icon only:

Share settings

Only the settings tabs listed below will work for our pages, the others will not because we use our own custom share buttons.

Social details > Settings in the right-hand sidebar,

General tab - Here you can define the title and description for Facebook sharing. You can also select the photo to display if the image you want to use is not the main image already on the page.

FB share settings

Facebook (debug) tab - Once a Facebook share URL is visited it is cached. This means that if you change the general tab settings after clicking the Facebook share URL, Facebook will not immediately register your changes and might show your old image/description. You need to tell Facebook to re-cache it.

Click the “Debug” which will open up Facebook’s sharing debugger. On this page, you can “Scrape again” the URL and it will take another look at your page and display a sample post. Often you need to press this a number of times for it to show properly. You will need to save the share settings and the page before you see the changes.

Twitter tab - the first section for the tweet text will not do anything because we don't use EN's share buttons. However, you can toggle-on the 'Twitter card details' section and define the Twitter card content to display if someone shares the URL of the page.

If you don't select an image here, the main image on the page will be used. If you do, remember to include the alt text.

The preview button at the bottom takes you to the Twitter card validator, you need to save the share settings and then the page before you will see your changes there.

Reference the email building guide for notes on how to create share messages for sharing buttons.

Email building guide

Closing pages

To close and redirect a page:

Click the cog settings icon to manage your page settings
Change the page status to "closed" using the dropdown list
Scroll down in the settings to the section "Closed landing page:" and select "Closed URL"
Paste the URL (with tracking if necessary) of the page you want to redirect to, in the empty URL field. Save.
Test that the redirect is working correctly by visiting the URL of the closed page.
Move the closed page to the Closed pages folder in your account

Thank you emails

Please see our guide on EN page thank you emails.

Building thank you emails

Page variable parameters

Hide the hamburger menu - you can hide the green hamburger menu in the top right-hand corner. This is done by adding the 'Donate Variable - Hide Header Menu' code block from your library to the page. Do not unlink this from the library.

Trouble Shooting

TWITTER CARD NOT SHOWING AN IMAGE

If sharing an EN page make sure there is an image inserted in the social share section of the EN page at the correct size Min 600px wide and ratio of 1.91:1
Use the Scrape function in the EN page Social Details Facebook Tab. Ensure it generates the message and image saved in the general tab
Make sure the page being shared is in Live mode
Share on Facebook - you can set the post to share privately so the public won't see it.
Make sure that the message does not exceed the max character count of 280 including spaces.

Engaging Networks: Creating donation pages 2021

Please read!

Introduction

1. Custom classes

Classes that you may want to use:

2. Shared library components

3. Form fields

4. Images

5. Page performance

6. Other donation template types

Donation landing page creation

Page Settings

Page 1 - Image, Title, Video

Page title

Background image

Video overlay

Page 1 - Donation form

Text above the donation form

Standard donate form

Monthly/Single question

Monthly/Single conditional text

Donation amount questions

Donation pop-up 1 (details, payment method and hidden fields)

Donation pop-up 2 (Card details/DD details)

Direct Debit Guarantee

Direct Debit confirmation

Gift Aid (UK only)

Monthly-focused form

Monthly/Single question

Text block below the form

Phone number collection

How it works on the front end

The opt-in logic (different per market):

How it works in the back-end

Extended page modules

Text panel

Text panel with image

Two-column text panel

Pop-up messages

To create the pop-up link:

To create the connected pop-up:

To create more pop-ups:

Pop-up Content

Images

Button code options

Close pop-up and go to anchor link on page

Close pop-up

Link to another page

Go to anchor link within pop-up

Accordion

Accordion code

Gift impact

Title

Panels

Button text

Overlay text

Images

Image URLs

Victories

Testimonials

Title, Quote and Author name

Images

CTA and button text

Donate button amount

Trust

Security

Image Credit

Share buttons

Donation thank you page

Conditional thanking data

Page 2 -Background image

​Page 2 Components - Left-hand column

Page 2 Components - Right-hand column

Donation thank you - sticky module.

Title

Share links

All options for share button code are below

Share button code

Share settings

Closing pages

Page 2 Components - Left-hand column