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:

  1. JavaScript variables that can set the default appearance and settings
  2. 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.

Customization

Default values