Getting Started
Welcome to the Squaresend Documentation. This page will be your guide for learning how to use and customize Squaresend on your website, blog, or publishing platform of choice.
Introduction
Squaresend makes it less annoying to recieve feedback from users. It can be installed on any site in seconds.
Squaresend.js is a small JavaScript file which does two things:
- stops mailto links from starting obtrusive programs without user consent
- brings a consistent, clean, and customizable web interface to all your users
Squaresend works well on both web and mobile browsers. It also works on non-browsers like IE7.
Installation
Installing Squaresend is easy. The following script can be placed anywhere on a web page:
<script src="https://squaresend.com/squaresend.js"></script>
Once the script is placed on a web page, the recipient email addresses need to be authorized by Squaresend. Note: the email addresses themselves don't need to be verified. Squaresend will accept both real and fake email addresses.
Authorization
Authorizing an email simply means telling Squaresend to accept messages sent to it through the Squaresend interface. When you sign up for Squaresend, your initial email will automatically be authorized.
To authorize another email you can click New Profile from your dashboard.
Once you've authorized your email, Squaresend will start delivering messages to your inbox.
Customization
Squaresend can be customized to fit any number of usecases. Free accounts can change the basic details of their interface while Pro accounts on the other hand can change virtually any aspect of it.
There are two ways to customize the interface:
- JavaScript variables that can set the default appearance and settings
- Query string parameters that can override default appearance and settings
Squaresend uses identical variable and parameter names to make customization easy.
Examples
All variable and parameter names start with sqs, which is short for Squaresend.
<script> sqs_title = "Leave us a message!"; </script>
The above example will change the default title of the interface. The query string equivalent of this is:
<a href="mailto:contact@example.com?sqs_title=Leave+us+a+message!">Contact us</a>
If you have multiple mailto links on a page, you can have different titles for each using the second method.
mailto:contact@example.com?sqs_title=Leave+us+a+message! mailto:bugs@example.com?sqs_title=Report+a+bug
API Reference
Free accounts have access to the following parameters: sqs_title, sqs_label_submit, and sqs_focus.
General
Parameter | Type | Comment |
sqs_title | String | interface title |
sqs_success | String | success message |
sqs_css | String | css styles for the interface |
Form Elements
Parameter | Type | Comment |
sqs_label_subject | String | label for subject field |
sqs_label_message | String | label for message field |
sqs_label_name | String | label for name field |
sqs_label_email | String | label for email field |
sqs_label_submit | String | label on submit button |
sqs_placeholder_subject | String | placeholder for subject |
sqs_placeholder_message | String | placeholder for message |
sqs_placeholder_name | String | placeholder for name |
sqs_placeholder_email | String | placeholder for email |
Settings
Parameter | Type | Comment |
sqs_remove | String | fields to hide from view, separated by commas |
sqs_required | String | required fields, separated by commas |
sqs_focus | String | focus specific field at start |
Default Values
Parameter | Type | Comment |
sqs_subject | String | default value for subject |
sqs_message | String | default value for message |
sqs_name | String | default value for name |
sqs_email | String | default value for email |
You can also use regular mailto query strings to set default values, e.g. ?subject=Some+subject.
If your website has a login system, you can let your logged in users contact you without having to enter in their name or email address by automatically filling it out for them.
Examples
Click "Result" to run the following examples.