This article is suitable for those familiar with HTML and CSS
This document provides instructions on creating a ‘secure’ HTML template. HTML templates can be added to the software from Pages > Components > Templates.
In order for a web page to run securely, two things must be in place:
- A valid SSL certificate must be purchased and installed for the required domain.
- All resources such as stylesheets, images and scripts must be called from a secure location.
Secure certificates already exist for the domains ca.engagingnetworks.app and us.engagingnetworks.app. This means that once your html template is secure, you will be able to use our secure certificate at no additional cost. But if you would like to run a subdomain such as ‘action.agoodturn.com’ under https (securely), then an additional SSL certificate will be required.
Creating the template
When creating a SSL template, you will need to use the source code of the page that you would like to use as a wrapper for your engagingnetworks.app actions or donation pages (‘view source’ in your browser window). Copy and paste the code into Dreamweaver or Notepad in order to start working with the code.
You will need to remove the code responsible for the main content of the page to create a space for dynamic content and adapt the rest of the code.
When deleting the main content of the page from the code, please make sure you delete both opening and closing html tags for selected sections of the code. Missing div tags will cause the code to break. For example:
<div id="intro"> (intro section begins here) ... </div> (intro section finished here)
Securing the template
Creating a SSL template imposes that all of the files (images, stylesheets, java script files) referenced in the code need to be called from a secure location.
Note: If your main website has an existing SSL certificate, then you are in a good position because it means the resources are already held in the secure location.
You should be able to just update http: to https: for the references and forgo the process of uploading the files into the Engaging Networks system.
If your main site does not have an SSL certificate, then all images, stylesheets, and script files can first be uploaded onto our system, and securely called in the html template.
Please follow the steps below:
Images
- Find any images in the template by searching for .gif, .jpg, and .png. Note: there will probably be images linked to the stylesheet(s) as well.
- Download them by opening up the image url in a browser window and clicking ‘File’ > ‘Save page as’. Note: It might be useful to retrieve all of the necessary files from your web team.
- Upload all of the images to Engaging Networks
- Change all of the image URLs to the ones given by the File & Images manager
Stylesheet and javascript files
- Find all javascript (.js) and stylesheet (.css) files by searching for .js and .css.
- Download them by opening up the url in a browser window and clicking ‘File’ > ‘Save page as’ (or ask your web team to provide you with all necessary files). Note: If there are multiple stylesheets, you can combine all of the styles onto one if you wish – just make sure you copy and paste the code from the stylesheets in the same order as the links to the stylesheets in the template.
- Upload all of the files to Engaging Networks
- Change all of the URLs to the ones given by the File & Images manager