How to set up your website integration

How to set up your website integration

You will need

The following are required before you can complete the setup of your website integration
  1. A website! You will need access to the back-end of the site in order to complete this setup.
  2. A payment processor account. We work with Stripe or iATS.
  3. Confirmation email templates. To create email templates please see the articles here.
    1. For Donations and Memberships, defaults will be setup for you.
    2. For other pages like Course Registration, Forms, etc., you will need to decide on the content and create templates. The defaults are very barebones.
  4. Make sure you have email configured in your database. To do so, please see the instructions here.
  5. From us, you should have received either a javascript embed code or links to your forms. See below for what those look like.


Javascript Embed code for Donations & Memberships web forms

<script type='text/javascript' src='//forms.silentpartnersoftware.com/api/Form/XX'></script>
When embedding the donation page, if you receive an error referring to "jQuery", you should also include this code:

OTS page link

For certain other modules like Course Registration, Volunteers, or Forms, you may receive a link that looks like this:

Checklist for completing the website integration setup

  1. Add the forms to your website.
  2. Test the form(s) by making a test transaction or submission.
  3. Check that you receive both of the following after you have tested the form:
    1. Payment confirmation, for forms involving payments.
    2. A follow-up email that varies depending on the type of form. Some examples:
      1. A donation thank you email with an attached donation receipt.
      2. A membership acknowledgement email.
      3. A confirmation email for filling out a form or registering for a course.
  4. Check that the confirmation emails say what you would like them to communicate and have the look and formatting you prefer. If you need to change the content or look of the confirmation emails, please review the articles here. For further assistance, please reach out to our support team.
  5. Check that the information you submitted via the form, ended up in the appropriate place in Sumac. Usually this takes a couple of minutes.

Notifications

In some instances, you may want certain staff members to receive a notification when a form is submitted online to alert them where follow-up is required. This can be accomplished in Sumac via Email Notifications. See how to set them up here and test that the appropriate staff member receives a notification when you test the form.

Adding the Sumac forms to your website

Sumac web forms can be put on any website. You will need some existing knowledge and access to the back-end of your website in order to complete this task.
There are two main ways of doing this:
  1. Embed the form in your website. With this method the form will appear in a frame, on a page on your website with the existing website header.
    1. This is mainly the method used when you receive the Javascript embed code shown above.
  2. Link to the form from your website. With this method the form will be a stand-alone form and all you will need to do is change a link on your website.
    1. This is the method used when you receive the OTS page link shown above.
The remainder of this article focuses on showing you what it looks like to embed forms in a page on your website. We will take a look at what the process might look like for both Wordpress and a hand-coded site.

Have a Wix website?

If you have a website with Wix you will need some additional guidance from our support team to complete this. Please reach out.

Please note that the purpose of the sections below is not to serve as a step-by-step set of instructions on how to set up the web page, but rather to give you an idea of what the process might look like. Your website might require different steps depending on it's setup.

Wordpress with Elementor Page Builder

Create a new page on your website for the donation form (or edit an existing page).

If you are unsure how to do this, please talk to your webmaster. For information on creating new pages in Wordpress, please see the article here.

Add an HTML widget to that page. A common way of doing this is by using a page builder like Elementor which is free and has an HTML widget that you can drag and drop onto your page.



Copy and paste the script into the area provided by the widget.


Once you save and publish the page, you should see the webform like this. That’s it!


A hand-coded website

You can copy and paste the script line into a <div> element, like this, in the <body> element of the web page:



Under some circumstances, you might also need to enter a jquery statement, like this, in the <head> element of the web page.