Creating and updating Giving Pages

If you haven’t already, please make sure you have configured FinDock Giving Pages.

To find out more about FinDock Giving Pages, please visit our website.

Anatomy of a FinDock Giving Page

A Giving Page created from a template has the following structure:

• Sections determine the basic structure of the page layout.
• Each Section can contain one or more horizontal Rows.
• Each Row can contain one or more vertical Columns.
• Each Column can contain one or more Components of a certain Content type.

This structure gives you some control over the presentation on the page. You can configure both the content and the appearance of a component.

There are currently four Content Types:

Translating Giving Pages

If you want to create a localized Giving Page, there are two translation methods you need to use:

• Translate labels and other texts directly in the Giving Page setup.
• Translate picklist values through the Salesforce Translation Workbench.

For translated content from the Workbench, you need to take the following steps:

1. Translate the picklist values using the Workbench.
2. Change the Salesforce user's language setting to the desired language for the Giving Page.
3. Create the Giving Page, adding translations for labels and other texts as needed in the page setup.
4. Publish the Giving Page and confirm translated content is displayed as desired.

For existing Giving Pages where you want to update translated picklist values, follow the same steps with one addition. To get the updated translations, remove and re-add the picklist fields in the Giving Page setup and then publish.

Creating a Giving Page

To create a FinDock Giving Page:

1. Launch the FinDock app in your Salesforce org.
2. Select the Giving Pages tab. (If the tab is not visible, add it by personalizing your nav bar.)
3. On the Pages Manager page, click Add page.
4. Select one of the pre-configured templates from the list.
5. Press Save.
6. You should now see the Pages Builder with your selected layout.

To help you build a beautiful page, you will find example images with the optimal pixel size and example text and values.

For each new page you create, you should modify at least the following elements:

• Page settings (favicon and metadata)
• Hero image and logo
• Titles and body text
• Payment form
  • Amounts
  • Personal details
  • Payment methods
  • Thank you page text

Editing a Page

To edit a FinDock Giving Page:

1. Launch the FinDock app in your Salesforce org.
2. Select the Giving Pages tab.
3. On the Pages Manager page, click Go to builder next to the page you would like to edit.

The Pages Builder for the selected page launches.

Editing Page Settings

To edit the Page Settings, click the cog icon in the Page settings bar.

You can configure the following Page Settings:

• Favorite Icon (Favicon): Small image that is shown in the web browser tab and bookmarks or favorites lists.
• Metadata (Title, Description, Image): Title of the page as shown in the Pages Manager, as well as in the web browser. Metadata is also used to preview your website when you share a link to your page, for example, through social media. To preview your metadata on different platforms like Google, Facebook & LinkedIn, you can use an online tool like Meta Tags. FinDock adds the metadata to the head of your page.
• Google Tracking ID: Giving Pages support Google Analytics, including the latest iteration, Google Analytics 4. To collect traffic data from the page to your Google Account, just copy your Tracking ID or tag ID from your account into this field. For more information, see below.
• Google Tag ID: You can use Google Tag Manager instead of Google Analytics to measure page performance. Please make sure you use only one or the other. If a page has both in use, the resulting metrics will likely be incorrect.

Editing page Layout

FinDock does not allow you to change the structure of a page at this moment. To use a different layout, please create a new page and select a different template. You can, however, change the (horizontal) padding of Sections, Rows and Components to change the size and position of certain elements.

Editing Content Types

You can edit two things about a Content Type:

• Content: what text or image is shown
• Appearance: look & feel like the background color, specific font, border size & color, padding, etc.

Editing title, text and image

To change the content of a component:

1. Click the component in the Pages Builder preview, or in the Page structure sidebar on the left.
2. Make your changes in the Content tab in the settings bar on the right.
3. Click Save Changes, or if you do not wish to save your changes, click Discard changes.

Configuring the payment form

The FinDock Payment Form is a managed component. Both the content and appearance settings are specific to this component.

To change the content of the FinDock Payment Form component:

1. Click the orange bar in the Payment Form component or Payment Form in the Page Structure sidebar on the left.
2. Make your changes in the Content tab in the settings bar on the right.
3. Click Save, or if you do not wish to save your changes, click Discard changes.

For details on the available form settings, see Payment Form configuration options.

Editing appearance

The look & feel of each section, row, column and component (including the payment form) can be adjusted individually.

Some settings like font and background image can be set on the page level, in the Page settings. These settings can be overridden for each section, row, column or component.

To change the appearance of a section, row, column or content component:

1. Click the section, row, column or content component in the Pages Builder preview, or in the Page structure sidebar on the left
2. Perform your changes in the Apperance tab in the settings bar on the right.
3. Click Save Changes, or if you do not wish to save your changes, click Discard changes.

The follow changes can be made through the Appearance tab:

• Font: selection of five popular fonts.
• Background image: upload an image to use as background.
• Background color: transparant or a specific color.
• Padding: the space between the content and its border. Only top and bottom padding can be adjusted. Your can use negative padding values to create overlapping elements.
• Borders: color and size of border around the element. Only top and bottom border can be set.

Custom fonts

FinDock provides the top 20 most used Google fonts by default in the Page Builder. If a font is not available by default in the Page Builder, they can be included as custom font through CSS. For this to work, the font needs to be publicly hosted.

To use a custom font, you can import it through CSS:

1. Host the font files on a server.
2. Go to FinDock Giving Pages.
3. Select the page where you want to use the font.
4. Go to Page Settings and scroll down to Custom Fonts.
5. Edit the below CSS example to use your font and add it to the Custom Font input.
6. Save your changes.

Your font can now be selected in the settings of this page.

Example CSS for font zantrokeregular, hosted at <your-fonts-location> in the woff file format.

@font-face {
  font-family: 'zantrokeregular';
  src: url('<your-fonts-location>/zantroke-webfont.woff2') format('woff2'),
       url('<your-fonts-location>/zantroke-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

You can add multiple fonts or font-styles by repeating the same code snippet in the Custom Font field.

Although FinDock supports WOFF, WOFF2, TTF, EOT and SVG, we strongly recommend you use WOFF and WOFF2 files for the best compatibility with web browsers.

Publishing a page

Once you are happy with the appearance and the content of your page (or want to check how it looks thus far), you can press Publish and your page will be updated.

Once deployed, a page can be found at <your-subdomain>.givingpage.org/<page-title>. For more information on domains, please visit Configuring FinDock Pages.

Setting a default page

The default page is the page that is shown if a user visits <your-subdomain>.givingpage.org without specifying a page title. If you do not set a default page, the user is redirected to a ‘404: Page Not Found’ page.

To set a default a FinDock Giving Page:

1. Launch the FinDock app in your Salesforce org.
2. Select the Giving Pages tab.
3. On the Pages Manager page, click the downward arrow icon next to the Page you wish to make default.
4. Click Set as default in the confirmation window, click Confirm, or, if you do not wish to set a new default p, click Cancel.

Dynamic campaign assignment

For any page, you can dynamically assign a campaign to payments made through that page by adding a query parameter for the payment form campaign ID setting to the URL of the page. This value in the URL overrides the default value of the field.

For example, the URL https://www.<subdomain>.givingpage.org/a-lot-of-whales?custom_campaign_gmb2Rcdo1lbGcE7=aBc123 inserts the campaign Id “aBc123” into the payment record made through the page "A lot of whales."

Optimize conversion with Google

FinDock helps you understand how visitors experience your Giving Pages using Google Analytics or Google Tag Manager. Both options are available for every webpage, but only one should be used on a page as per Google recommendations.

For Google Analytics, you can use some or all of the following specific events for your pages:

• Session_start: triggered when a visitor lands on your Giving Pages webpage
• Validate_amounts_frequency: triggered when a visitor chooses an amount and clicks Next
• Validate_personal_details: triggered when the visitor has filled in personal details and clicks Next
• Make_payment_intent: triggered when the visitor clicks the Donate button
• Payment_intent_succeeded: triggered when the visitor is redirected back to the Giving Pages webpage after successfully completing the payment
• Payment_intent_failed: triggered by a failure in the payment intent process which prevented completion

Deleting a page

To delete a FinDock Giving Page:

1. Launch the FinDock app in your Salesforce org.
2. Select the Giving Pages tab.
3. On the Pages Manager page, click the downward arrow icon next to the Page you wish to delete.
4. Click Delete.
5. In the confirmation window, click Delete. If don't want to delete the page, click Cancel.

Troubleshooting

When something goes wrong on a Giving page and the error is caused by an interaction with the FinDock Payment API, a message is stored in the Log object in your Salesforce environment.

For more information, please read the FinDock Log object section in Troubleshooting the Payment API article.