Returns Portal v1

Configure the display of a Returns Portal in your shop that provides a streamlined returns process for your customers.

This article describes the configuration for Returns Portal v1.

Setting Up the Returns Portal Snippet

This following instructions explain the basics of setting up the Returns Portal snippet and how you can customize the data settings and style of the widget in three easy steps.

1

Add the snippet to your website

To insert the snippet onto a page on your website or online shop:

1. Create an empty landing page, for example: at /returns-portal.

2. Copy the following snippet and paste it somewhere in the body (not the head) of your page where you want the returns portal to be displayed.

The best place for the snippet would be a responsive content container of your page where the main content is usually displayed.

This will automatically load our JS snippet and default CSS. The plugin will be rendered in the defined DOM node.

Production Environment:

<div id="pl-returns-plugin"
  data-user="{{your parcellab user id here}}"
  data-lang-code="{{lang code of your current shop site e.g. de}}"
  data-country-code="{{country code of your current shop site e.g. ch}}"
  data-scroll="off">
</div>
<script src="//returns.parcellab.com/dist/returns-plugin.js" async="true"></script>
<script>(function () {/* Load default styles ... */if(!document.getElementById("pl-returns-portal-styles")){var styles=document.createElement("link");styles.id="pl-returns-portal-styles";styles.rel="stylesheet";styles.href="//returns.parcellab.com/dist/returns-plugin.css";document.getElementsByTagName("head")[0].appendChild(styles)}})();</script>

Staging Environment:

<div id="pl-returns-plugin"
  data-user="{{your parcellab user id here}}"
  data-lang-code="{{lang code of your current shop site e.g. de}}"
  data-country-code="{{country code of your current shop site e.g. ch}}"
data-scroll=”off”>
</div>
<script src="//staging-returns.parcellab.com/dist/returns-plugin.js" async="true"></script>
<script>(function () {/* Load default styles ... */if(!document.getElementById("pl-returns-portal-styles")){var styles=document.createElement("link");styles.id="pl-returns-portal-styles";styles.rel="stylesheet";styles.href="//staging-returns.parcellab.com/dist/returns-plugin.css";document.getElementsByTagName("head")[0].appendChild(styles)}})();</script>

2

Modify the data settings

The data settings of the Returns Portal widget will have to be updated based on the following data elements:

Data Element	Description	Example
data-user	Your parcelLab user ID. If you don’t have it to hand, please reach out to your parcelLab representative.	1328
data-lang-code	The ISO-2 language code of your current shop site. The widget will be displayed in the specified language	de
data-country-code	The ISO-2 country code of your current shop site. This is useful if you shop is present in multiple countries.	ch
data-scroll	The setting for an automatic scrolliing to the form on the Returns Portal login page. This setting is off by default. To enable automatic scrolling to the login form, set the flag to on.	on

Here is an example of modified data settings:

<div id="pl-returns-plugin"
  data-user="1328"
  data-lang-code="de"
  data-country-code="ch"
  data-scroll="on">
</div>
<script src="//returns.parcellab.com/dist/returns-plugin.js" async="true"></script>
<script>(function () {/* Load default styles ... */if(!document.getElementById("pl-returns-portal-styles")){var styles=document.createElement("link");styles.id="pl-returns-portal-styles";styles.rel="stylesheet";styles.href="//returns.parcellab.com/dist/returns-plugin.css";document.getElementsByTagName("head")[0].appendChild(styles)}})();</script>

3

Style the widget

The widget can be styled according to your needs by editing the CSS.

The whole widget is wrapped in a container with id="pl-returns-plugin".

To adjust the overall theme, you can change any of the following global variables:

#pl-returns-plugin { 
 --bg-color: #ffffff;
 --bg-secondary-color: #faf9f8;
 --color-primary: #0098dd;
 --color-lightGrey: #d2d6dd;
 --color-grey: #747681;
 --color-darkGrey: #3f4144;
 --color-error: #d43939;
 --color-success: #62bc5f;
 --grid-maxWidth: 120rem;
 --grid-gutter: 2rem;
 --font-size: 1rem;
 --font-color: #333333;
 --border-radius: 0px;
}

To adjust the style for specific elements within the widget, add the prefix #pl-returns-plugin for the HTML elements you want to style. In the following example, a font size is specified for <h1> elements in the widget.

#pl-returns-plugin h1 { 
 font-size: 2rem;
}

To target specific screen sizes, use media queries as seen in the following example.

@media screen and (max-width: 1025px) { 
 #pl-returns-plugin { 
 margin-top: 50px; 
 padding: 0 15px; 
 } 
}

Alternatively, as an add-on to the base platform, we can host the Returns Portal for you. The widget will then be implemented on a page that can be styled according to your shop or brand’s design guidelines.

Configuring Global Returns Portal Selection

If you have multiple Returns Portals for each country or language, you can add our Returns Portal snippet to a landing page where your customers can select the Returns Portal they need to navigate to. This can simplify the implementation of displaying multiple Returns Portals on your website by reducing the number of pages needed to host each snippet.

To enable Returns Portal selection on a page on your website or online shop:

1. Create an empty landing page, for example: at /returns-portal.

2. Copy the following snippet and paste it somewhere in the <body /> (not the <head />) of your page where you want the Returns Portal to be displayed.

The best place for the snippet would be a responsive content container of your page where the main content is usually displayed.

This will automatically load our JS snippet and default CSS. The plugin will be rendered in the defined DOM node.

Production Environment:

<div id="pl-returns-plugin"
  data-user="{{your parcellab user id here}}"
  data-scroll="off">
</div>
<script src="//returns.parcellab.com/dist/returns-plugin.js" async="true"></script>
<script>(function () {/* Load default styles ... */if(!document.getElementById("pl-returns-portal-styles")){var styles=document.createElement("link");styles.id="pl-returns-portal-styles";styles.rel="stylesheet";styles.href="//returns.parcellab.com/dist/returns-plugin.css";document.getElementsByTagName("head")[0].appendChild(styles)}})();</script>

Staging Environment:

<div id="pl-returns-plugin"
  data-user="{{your parcellab user id here}}"
  data-scroll="off">
</div>
<script src="//staging-returns.parcellab.com/dist/returns-plugin.js" async="true"></script>
<script>(function () {/* Load default styles ... */if(!document.getElementById("pl-returns-portal-styles")){var styles=document.createElement("link");styles.id="pl-returns-portal-styles";styles.rel="stylesheet";styles.href="//staging-returns.parcellab.com/dist/returns-plugin.css";document.getElementsByTagName("head")[0].appendChild(styles)}})();</script>