Parcel Playground

Parcel Playground is a tool for building and testing emails.

Note

This feature is for email frameworks and other tools that need to display emails from inside their product.

When you're documenting your code or building your product, you might need to give your users a way to view and experiment with an email.

Parcel makes this super easy with the "Edit in Parcel" button!

Demo

The code

To create a "Edit in Parcel" button, use the following code:

<!-- Form to send the HTML to the "Edit in Parcel" page -->
<form
  class="parcel-button"
  action="https://parcel.io/playground"
  method="POST"
  target="_blank"
>
  <!-- set this field to a url encoded JSON object with `html`, the `name` of the mail, the `returnUrl` and `returnText` -->
  <input
    type="hidden"
    name="data"
    value="%7B%22name%22%3A%22My%20Email%22%2C%22html%22%3A%22%3Cb%3EHello%20world%3C%2Fb%3E%22%7D"
  />


  <!-- This is the button the user clicks on - feel free to customize this to fit your page! -->
  <input
    type="image"
    src="https://parcel.io/button.svg"
    width="180"
    height="38"
    value="Edit in Parcel"
  />
</form>

The JSON object encoded into the input value (above) should be as follows:

{
  name: `Name of your Email`,
  html: `<html> your html code </html>`,
  returnUrl: `www.yourwebsite.com`,
  returnText: `What the return button will say`
}

The returnUrl and returnText fields are optional. If they are not included, no return button will show.

JavaScript

To generate the data value for Javascript use the following code:

const data = encodeURIComponent(
  JSON.stringify({
    name: 'My Email',
    html: `<b>Hello JavaScript</b>`,
    returnUrl: `example.com`,
    returnText: `Back to example page`,
  })
);
// => %7B%22name%22%3A%22My%20Email%22%2C%22html%22%3A%22%3Cb%3EHello%20JavaScript%3C%2Fb%3E%22%2C%22returnUrl%22%3A%22example.com%22%2C%22returnText%22%3A%22Back%20to%20example%20page%22%7D

You can then set the input value to data.

PHP

To generate the data value for PHP use the following code:

$data = rawurlencode(
  json_encode(
    array(
      'name' => 'My Email',
      'html' => '<b>Hello PHP</b>'
      'returnUrl' => 'example.com'
      'returnText' => 'Back to example page'
    )
  )
);
// => %7B%22name%22%3A%22My%20Email%22%2C%22html%22%3A%22%3Cb%3EHello%20PHP%3C%2Fb%3E%22%2C%22returnUrl%22%3A%22example.com%22%2C%22returnText%22%3A%22Back%20to%20example%20page%22%7D

You can then set the input value to $data.

Using remote content

Some times you may have HTML you want to display in Parcel hosted somewhere already in the raw HTML form.

Below is a example of how fetch the HTML from a remote URL, insert it into the form, and send it to Parcel right when the user clicks the button.

<!-- Form to send the HTML to the "Edit in Parcel" page -->
<form
  class="parcel-button"
  action="https://parcel.io/playground"
  method="POST"
  target="_blank"
  data-url="https://raw.githubusercontent.com/TedGoas/Cerberus/master/cerberus-fluid.html"
>
  <!-- set this field to a url encoded JSON object with `html` and the `name` of the mail -->
  <input type="hidden" name="data" value="" />


  <!-- This is the button the user clicks on - feel free to customize this to fit your page! -->
  <input
    type="image"
    src="https://parcel.io/button.svg"
    width="180"
    height="38"
    value="Edit in Parcel"
  />
</form>
<script>
  (function () {
    const forms = document.querySelectorAll('.parcel-button');


    for (let i = 0; i < forms.length; i++) {
      const form = forms[i];
      form.addEventListener('click', function (event) {
        const url = form.getAttribute('data-url');


        // if we have a url to fetch html from
        if (!form.elements.data.value && url) {
          event.preventDefault();


          // fetch the data, update the value to
          fetch(url)
            .then((response) => {
              return response.text();
            })
            .then((html) => {
              // set the value of the email content and resubmit the form
              form.elements.data.setAttribute(
                'value',
                encodeURIComponent(JSON.stringify({ name: 'Email', html }))
              );
              form.submit();
            });
        }
      });
    }
  })();
</script>
Previous ArticleNext Article