Skip to main content

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#

Page Builder overview

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 cointain 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:

Content componentDescription
TextWrite rich text with the Salesforce text editor.
TitleText component that wraps your content in HTML header tags H1 to H5. These tags are used to apply CSS markup.
ImageUpload an image to Salesforce.
Payment FormComponent managed by FinDock that shows a donation form on your page. The form is automatically integrated with your Salesforce environment through the FinDock API v2. You can adjust certain settings, like which payment methods to display and the look & feel of the component. All texts in form presentation can be modified (e.g. for translation purposes).

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. All FinDock Giving Pages contain the Payment Form component.
  5. Press Save.
  6. You should now see the Pages Builder with your selected layout. To help you build a beautifull page, you will find example images with the preferred pixel size and example text and values. You can edit these images and values to your liking.

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: If you have a Google Analytics account and one or more properties, you can add your Tracking ID here to collect traffic data from the page to your Google Account. For instructions where to find your Tracking ID in your Google Analytics account, vist Google support. Copy the value UA-XXXXXXXX-X from your account into this field.

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.

note

Several processors require an initial payment to authorize the recurring collection of funds through credit card. For these processors, FinDock collects a first Installment and sets the start date of the Recurring payment +1 month ahead. Please take this into account when creating custom processes based on the start date of a recurring credit card payment.

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.
tip

Any section, row, column or component except the Payment form can have a background image. If you can't find where to set, remove or replace an image, make sure you have selected the right one in the menu on the left. For instance, the 'panda' image is a section background.

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 our Configuring FinDock Pages article.

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 CampaignId to the URL of the page. This will override the static value in the payment form campaign ID setting.

The value for CampaignId parameter is case sensitive. For example, the URL https://www.<subdomain>.givingpage.org/a-lot-of-whales?CampaignId=aBc123 inserts the campaign ID “aBc123” into the payment record made through the page "A lot of whales."

tip

Test the page URL with the dynamically assigned campaign to ensure the value is valid. If the value is not correct, the URL redirects to your payment form error page.

Deleting a page#

warning

There is no recovery for deleted pages, so please be careful.

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 the Troubleshooting the Payment API article.