Charitus Logo

Giving Support for your Church

Use our simple tool to put helpful information about giving on your church website

As part of the Charitus mandate, we provide information to help congregants give thoughtfully and intentionally to your church. With just a few clicks, you can add a fully designed page to your website that matches your colours and fonts.

Add the giving page to your website

Three easy steps to adding the giving page to your website

1. Click here to access the editor

g
2. Select colours and fonts using the editor tool
i
3. Copy the code and paste it on your website
Access the Editor

How to use the editor:

Choose your colours
  1. If not selected, click on “Colours” button on the editor
  2. Choose a Primary colour – this changes the colour for the main heading on the page and should match the main colour on your website
  3. Choose a Secondary colour – this changes the colour of the buttons on the page
  4. Choose a Neutral colour – this changes the colour of the icons on the page
  5. Choose an Overlay colour – this changes the opaque overlay colour on the website
Choose your fonts
  1. If not selected, click on the “Fonts” button on the editor
  2. Select a “Headings” font – this changes any headlines on the page
  3. Select a “Body” font – this changes the paragraph font on the page
Embed on your site
  1. Click on the “Embed” button on the editor, a window will open with your embed code
  2. Click on the copy button (the two squares overlapping each other) to copy the embed code
  3. Browse to your website and create a new page
  4. Paste the embed code in the webpage editor
Add the giving page to your website

Pasting the embed code on your website depending on the platform you’re using

WordPress

  • Classic Editor: Simply switch to the ‘Text’ view and paste the iframe code where you want the content to appear.
  • Gutenberg Editor: Use the ‘Custom HTML’ block to insert your iframe code. You can add this block by clicking the ‘+’ button and searching for ‘Custom HTML’.

Joomla

  1. Navigate to the article or module where you want to embed the iframe.
  2. Use the HTML editor (TinyMCE, JCE, etc.) and switch to the code view mode to paste your iframe code.

Drupal

  1. Go to the content section where you want to add the iframe, such as a page or a post.
  2. Use the ‘Full HTML’ text format (or a similar option that allows HTML input) and paste your iframe code.

Shopify

  1. Navigate to the section where you want to add the iframe, such as a product description or a blog post.
  2. Use the ‘Show HTML’ button (looks like ‘<>’) in the rich text editor to switch to HTML view and paste your iframe code.

Squarespace

  1. Click on ‘Edit’ on the page you want to add the iframe.
  2. Add a ‘Code’ block by clicking the ‘+’ icon, then select ‘Code’ from the menu.
  3. Paste your iframe code into the code block.

Wix

  1. Go to the site editor and click on the ‘+’ button to add a new element.
  2. Choose ‘More’ and then ‘HTML iframe’ from the menu.
  3. Enter your iframe code in the HTML Settings panel.

Magento

  1. Navigate to the CMS page, product, or block where you want to insert the iframe.
  2. Switch to the ‘Show / Hide Editor’ to access the HTML view, then paste your iframe code.

Weebly

  1. In the editor, drag and drop the ‘Embed Code’ element to the place where you want your iframe content.
  2. Click on the ‘Edit Custom HTML’ option and paste your iframe code.

Typo3

  1. Edit the page or content element where you want to embed the iframe.
  2. Use the ‘HTML’ content element or an extension that allows custom HTML and paste your iframe code.