How to Embed the Generous Widget on your Church Website

Once the Generous Church Giving Platform has been setup you are now ready to embed your Giving Widget into your church website!

There are 2 major steps to undertake. 

1. Paste the short widget Embed Code into the content section of any page on your website where you want to display the Generous giving widget.
2. Paste your custom JavaScript code into the footer section of your website.

You may need help from your Web Administrator or Web Developer, however, if you are comfortable with HTML, WordPress or your content management system (CMS) you could give it a go yourself.

---

Where do we find these two bits of code?

1. To find and copy the Embed Code login to your church's Generous Admin Console under the menu item > Settings > Embedding > Embed Code heading. Copy this code...

  <div data-generous-widget></div>

2. To find and copy the correct JavaScript Code login to your Generous Admin Console under the menu item > Settings > Embedding ... then follow these steps,

a) Select Transaction Type > Give... [default]

b) Select Campus Options > No Campus [default]

c) Press the Generate Code button

d) Select and Copy the JavaScript code  

<script>!(function(d,x,f,i){
x=d.querySelectorAll('[data-generous-widget]');
for(i in x)if(x.hasOwnProperty(i)){...
...
...
</script>

---

Where do we embed the code?

1. To embed the JavaScript code    

   • Insert the code immediately above the closing </body> tag of your website’s global footer template file (so that it is loaded on all pages of your website), or on an individual page's footer.            
     • NB: Content Management Systems (CMS) typically handle this a little differently. Just search "how to embed Javascript into the footer of mycms" or "how to add javascript in mycms". "Mycms" being your website content management system or website theme.

2. To embed the widget Embed Code   

   • Log on to your website, create a new or use an existing web page, and paste the Embed Code into a content area. 
   • Make sure you are in the TEXT/CODE VIEW not VISUAL VIEW
   • For example:

Publish the page and you are now ready to view the widget.

---

Multi-Campus Widgets (Multiple widgets on one website)

Typically most church websites have one giving widget. However, some multi-campus churches may wish to display a specific widget locked to a "defined campus only" on corresponding pages in their website. 

To achieve this a unique JavaScript block needs to be generated in the Church Admin Console (MENU>Settings>Embedding) for each campus. This JavaScript then needs to be inserted into each of the corresponding campus pages footer.

Hosted Content Management Systems (hCMS)

Please keep in mind some hosted content management systems (hCMS) like Wix, Squarespace, eCatholic, Elvanto, etc have restrictions on embedding Script <script> into their footers. Most have workarounds but you will have to search their online help desk for answers from other users.

Troubleshooting - a few things to consider

• Make sure not to have two sets of JavaScript code in the footer or content section of the page. E.g., a global and campus specific block.
• Be careful that you don't drop a part of the code, e.g., "script>" instead of "<script>
• If your CMS doesn't allow you to embed into the footer file it may be possible to paste it into the page content area low in the page. 
• Make sure you paste the both the JavaScript Code and Embed Code into a raw text area (html/raw script) not a visual WYSIWYG area.