Javascript Plugin for EShot Customer Campaigns and Newsletter Sign-Up
Kedel are a leading, UK based recycled plastic products business who manufacturer anything from deck planks to benches. The brief for this project was to provide a generic javascript pop-up window plugin for their website to give visitors to opportunity to register for monthly updates on new products, discounts, how to videos etc.
Kedel have 3 websites - www.kedel.co.uk , www.kedeleducation.co.uk and www.recycledplasticbuildingmaterials.co.uk , and whilst these websites are all similar in style, each required a slightly different implementation in terms of fields + interest groups.
Other requirements included the ability to delay the pop-up window appearing until the website visitor had browsed the site for a time period, and also not to re-display the pop-up in the same visit if the visitor closed it without registering.
Once a site visitor had signed up, their details had to be pushed into Kedel's campaign management software called EShot.
Techs Used
- Javascript ES6
- Jquery
- Bootstrap Modal
- EShot
- Bluepark CMS
The EShot Javascript Plugin
EShot provide a basic method of integrating a campaign sign-up window into a website, but in this instance an implementation was required that could be configure to work across Kedel's 3 websites. The approach taken was to produce a Json data structure that can be configured for each website whilst still using the same javascript code base.
The resulting plugin allows configuration of the following:-
- Popup window title
- Call to Action message
- Time period in seconds before displaying popup
- Time period in seconds before re-showing popup if cancelled
- Eshot campaign code
- Array of form fields including id, name, sort order, validation and placeholder
- Interest groups for visitors to sign up for
The plugin utilises bootstrap modal, with a customised theme to match the Kedel website style. The javascript plugin produced was written using ES6 and then transpiled to ES5 for backwards browser compatibility.
Integration With Eshot Campaign Management Software
One of the key requirements for the plugin was to integrate with the standard EShot sign-up process that requires the customer to complete their registration by clicking on a link emailed from EShot once the pop-up form is submitted. By following guidelines provided by EShot, the plugin fulfills this requirement and seamlessly integrates with their sign-up completion process.
Implementing the Plugin
The final stage of this project involved deploying the Eshot javascript campaign management plugin via the Bluepark CMS system. Deployment was as simple as uploading the plugin to a custom folder and then referencing the relevant javascript and stylesheet files on the base website template.
Example of an Eshot Javascript Popup Window
The finished article! To view the plugin in action you can visit www.kedel.co.uk , www.kedeleducation.co.uk or www.recycledplasticbuildingmaterials.co.uk.
Kedel Ltd
Lewis Walch , IT Manager
We found Stephen by accident while collecting our kids at the same school, but we are so glad we did. Worked fast and kept at it till everything was setup just as we needed, even though our brief was a bit vague and changed midstream. Really great to work with, giving us feedback at every stage. We will definitely use him again and highly recommend his services.
