This document is intended for web teams and digital managers to explain a little about how Engaging Networks software is able to fit into the rest of your digital strategy, and areas where you can get involved in the process. It will also be of use to agencies who have been asked to build custom pages, email templates or microsites for an organisation that uses Engaging Networks. Many of our clients’ most successful actions have been as a result of advocacy or fundraising teams who are day-to-day users of Engaging Networks working closely with their web teams.
Training For In House Development Teams
If you are a developer working in house for an organization and would like in depth training on the design and development of page and email templates, we have a free training curriculum available for you in our online e-learning centre, the Academy. Click here to request your access.
Training For Web Agencies
If you are a web agency working with our clients, we now offer a range of training programs especially for agencies who want to learn more about our tools and work towards becoming an official accredited partner. The training is available through our online e-learning centre the Academy. If you’d like more information on our agency partner program please see this page.
HTML templates
Engaging Networks actions are hosted on our servers. When a user fills in a form, their data is submitted to our database and depending on the action type an email to a target or a submission to a payment gateway may also occur.
However, when you look at an Engaging Networks page, it will often look like part of our client’s own website. This is achieved using “html templates”.
Watch the short video below an introduction to using HTML templates in Engaging Networks.
Html templates are comprised of a header section and a footer section. In the html code for an Engaging Networks action, they are the html that come before and after our form.
Header:
| Code Block |
|---|
<!DOCTYPE HTML>
<head>
<title>Engaging Networks</title>
<link href="http://engagingnetworks.net/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul><li><a>Home</a></li><li><a>Funraising</a></li></ul>
<div id="wrapper" > |
Engaging Networks form (not all fields shown):
| Code Block |
|---|
<form method="post" action="2" class="en__component en__component--page">
<div class="en__component en__component--row en__component--row--1">
<div class="en__component en__component--copyblock">
<h1>Take Action</h1>
<p>Please sign this petition</p>
</div>
</div>
<div class="en__component en__component--formblock">
<div class="en__field en__field--text en__field--firstName en__mandatory">
<label for="en__field_supporter_firstName" class="en__field__label">First Name</label>
<div class="en__field__element en__field__element--text">
<input id="en__field_supporter_firstName" type="text" class="en__field__input en__field__input--text" name="supporter.firstName">
</div>
</div>
<div class="en__field en__field--text en__field--49280 en__field--emailAddress en__mandatory">
<label for="en__field_supporter_emailAddress" class="en__field__label" style="">Email</label>
<div class="en__field__element en__field__element--text">
<input id="en__field_supporter_emailAddress" type="text" class="en__field__input en__field__input--text" name="supporter.emailAddress">
</div>
</div>
<div class="en__submit">
<button>Submit</button>
</div>
</div>
</form> |
Footer:
| Code Block |
|---|
</div><!--wrapper-->
<script>
/* my javascript */
</script>
</body>
</html> |
You can find out where to create html templates here. The key thing to remember is that while the form is generated by the software, the header and footer are free fields into which you can put your own HTML. Links, style tags and script tags will all work as normal. This allows you to go beyond just recreating an existing website: you can build campaign-specific templates and microsites too. While you should make your templates responsive, we do also offer the ability to create mobile-specific templates and text and form blocks that will be used if we detect a page is being requested from a mobile device.
| Note |
|---|
Image and link urls, including to stylesheet and javascript resources, need to be absolute as the page is hosted on our server If you wish to use jQuery you will have to declare it in the header. |
Embedded actions
Rather than directing supporters directly to an Engaging Networks landing page, our clients often embed their forms as iframes on their own websites, affiliate sites or blogs.
Embed a standard action page
You may want to develop a specific HTML template for this purpose with navigation menus, sidebars and footers removed. Then just add the page url as the “src” attribute in the iframe tag.
| Warning |
|---|
Embedded pages should be secure, so make sure the source url of the iframe has “https” on the front. Although the iframe itself is then secure, if it is embedded on a non-secure page, some users will be deterred from donating if they notice this. |
You should also be aware that our pages use cookies to store the user session. Some browsers block iframes from different domains from using cookies, so you will need to turn off Session Validation (and probably include a Captcha in your form block). More on embedding here.
Component blocks
Text and images are inserted into Engaging Networks actions using Text Blocks, and form elements as Form Blocks. Form blocks can contain supporter fields such as email address, and also questions (that store data transactionally) or opt-ins. If you wish to insert javascript, stylesheets or other html it is recommended you use a Code Block.
Data calls
Engaging Networks also provides a number of data calls to retrieve basic action data. You can use these to build counters and roll calls to put on your action pages or even on external webpages. For example, you could display the number of signees of a petition on your own homepage. We also have in-built widgets that do the same.
You can find details of our data services here: http://ca.engagingnetworks.app/ea-dataservice/services.jsp
For all of the data services you require the public token from the Engaging Networks admin section. The subaccount details are given to you by us when we set up your account. Go to Hello YOURNAME > Account Settings > Tokens, and from there you can generate and get your public token string.
As an example, “EaDataCapture” is one of our more popular data calls. You can use it to get the number of people who signed a petition (which is a “data capture” type of action in Engaging Networks).
We pass in “campaignId” with the id from the url of the campaign itself, and a resultType. “Summary” will return aggregated counts for the petition.
You also specify what format you want to recieve the data in. It defaults to XML, but you can also add “contentType=json”.
So we can construct a url like this:
http://ca.engagingnetworks.app/ea-dataservice/data.service?service=EaDataCapture&token={your-public-token}&campaignId=20177&contentType=json&resultType=summary
Visiting that url returns JSON:
| Code Block |
|---|
{"rows":[{"columns":[{"name":"campaignId","value":"20177","type":"xs:int","format":""},{"name":"campaignName","value":"Example Data Capture","type":"xs:string","format":""},{"name":"pageHits","value":"90","type":"xs:int","format":""},{"name":"registrations","value":"23","type":"xs:int","format":""},{"name":"participations","value":"23","type":"xs:int","format":""},{"name":"participatingSupporters","value":"10","type":"xs:int","format":""}]}]} |
The value we are looking for here is “participatingSupporters”. This gives us the number of unique constituents who have filled in the petition.
You could make a data call like this using ajax in javascript (you may need to use JSONP if you are making the call from outside an Engaging Networks page). In php you could use file_get_contents(), phpcUrl or similar.
| Note |
|---|
The data returned by these calls is cached in a reporting table. This reporting table is refreshed every 15 minutes, so new actions won’t immediately increase the count. |
Other data services
For more advanced data services, including REST, read this page.
Email templates
Email templates are set up under Email > Templates. There’s a full guide here. In most cases you can simply paste the html for your template into the source editor. There is an in-liner that applies styles you have put in between <style> tags to the html tags themselves when making email campaigns.
It is important to include an unsubscribe link that updates the correct opt-in question.
When a new email is ready to be sent, the client can load in the appropriate email template and create the content, test and send it.
SPF records and email
If the organisation you are working with is using Engaging Networks to send email, we recommend setting up SPF records on your domain to help deliverability. You can find more details here.