##<lobby-element>
lobby-element is a Polymer Web component containing a simple contact form allowing users to email their representatives. The form allows users to search for their representatives by constituency and to edit and send them an email.
This doc will describe how to integrate it into your Web page and how to configure the server scripts (PHP and Google Apps Script).
##Configuration
###Frontend
-
Include
webcomponents-lite.min.jsandlobby-element.htmlin the header. -
Assign values for
email-url,enable-platformsandtwitter-uservalues. -email-urlspecifies the location of the PHP script on your server. You can find this script in the repo atlobby-element/serverScripts/sendEmail.php. -twitter-userandenable-platformsare optional. The values are passed straight through tosocial-elementwhich can be removed if not needed. Please see thesocial-elementproject for more on configuration.
**Example**
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../lobby-element.html">
</head>
<body unresolved>
<lobby-element email-url="your_email_url" enable-platforms="email, facebook, twitter" twitter-user="your_twitter_user">
</lobby-element>
</body>
</html>
- Assign a value for Recaptcha
data-sitekeyinlobby-element.html. - Keys can be generated at https://www.google.com/recaptcha/admin#list. - Openlobby-element.htmlin a text editor and replace the placeholder text for the value ofdata-sitekeywith the new sitekey you have generated.
- Note: This step is a temporary work-around value could not be exposed as a property. This means that if you update your dependencies with Bower after modifying the file your changes will be overwritten and you will have to repeat the steps.
-
Update the
reps.jsonfile. - This is an array of objects. Each object has three properties: 'constituency', 'name', and 'email'. - If you have compiled your data in Microsoft Excel or Numbers for Mac you will need to save it as a .csv file and then convert it to a .json file usingconvertCsvToJson.pylocated in thelobby-element/tools.- Open you file in Excel or Numbers and make sure the first row contains headers named 'constituency', 'name', and 'email'. (It can also contain other headers, but there are the only ones of interest)
- Save the content as 'reps.csv' in
lobby-element/tools.
- You can find the steps saving as a .csv file here for Microsoft Excel and here for Numbers.
-
Open Terminal or Command Prompt navigate to
lobby-element/toolswhich now contains two files: 'reps.csv' andconvertCsvToJson.py. Run the script. This will create a new file called 'reps.json'$ python convertCsvToJson.py -
Copy the new 'reps.json' from
lobby-element/toolstolobby-element/config.
-
Update the
config/emailSubject.txt,config/emailMessage.txtandconfig/campaignBlurb.txtfiles.
- This blurb text allows for a brief description of the campaign which is not user editable.
- This subject and message text is pre-populated in the form and is user editable.
###Backend
-
Google Apps script 1. Go to script.google.com 2. Paste in the contents of
lobby-element/serverScripts/Code.gsand save the file. 3. Run setUp()- This will create 2 spreadsheets for logging: 'emailCampaignResults' and 'emailCampaignRememberedParticipants'
- Before it runs it will ask you to authorise the script to send emails as you (so you ned to be signed in with the Google account from which you want the emails tobe sent) 4. Publish the script by clicking on the cloud icon or by opening the 'Publish' menu and selecting 'Deploy as web app...'
- On the 'Deploy as web app' dialog select the following options:
- 'Project version': 'New'
- 'Execute the app as': 'Me'
- 'Who has access to the app':'Anyone, even anonymous' 5. Copy the URL displayed as 'Current web app URL:'. You will point to this from the PHP script on your local server.
-
PHP file 1. Open the php file in a text editor. It is located at
lobby-element/serverScripts/sendEmail.php. 2. Replace the placeholder text for the value of$secretwith the new Recaptcha secret you have generated. 3. Replace the placeholder text for$urlto point to AppScript 4. Deploy the scrit on your server and pass the value<lobby-element>into asemail-url.
- Google user
- You will need to register a Google Apps account here: https://www.google.com/a/signup
- You will need to enable billing. Follow the steps here: https://cloud.google.com/appengine/docs/developers-console/#billing
- You not need to pay for usage below the quota of 100 messages per day and 8 messages per minute.
- Note: When you enable billing, the email quota remains at 100 messages per day. You must explicitly request a higher mail quota. [ref]
While you can download this project as a .zip file, it will not run without its dependencies which are managed via Bower.
-
To install bower run the following command in your terminal:
$ npm install -g bowerNote: Bower requires node, npm and git. For more info go to http://bower.io/.
-
You can now download
lobby-elementand its dependencies:$ bower install -save aengusbates/lobby-element -
You can verify that the element is displaying correctly locally by running the Python's simple server.
$ python -m SimpleHTTPServer
This starts a web server on port 8000, so you can test your the element by navigating a browser to the URL localhost:8000/bower_components/lobby_element/demo/.