Returns Portal v1

Configure 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

The following instructions explain the basics of setting up the Returns Portal 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:

Create an empty landing page, for example: at /returns-portal.
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.

data-country-code

The ISO-2 country code of your current shop site.

This is useful if your shop is present in multiple countries.

data-scroll

The setting for automatic scrolling 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.

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>

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.

For further information please contact your parcelLab representative.

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:

Create an empty landing page, for example: at /returns-portal.
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>

PreviousReturns Portal Configuration NextReturns Portal v2

Last updated 1 month ago

Was this helpful?

hashtagSetting Up the Returns Portal

hashtag1. Add the snippet to your website

hashtag2. Modify the data settings

hashtag3. Style the widget

hashtagConfiguring Global Returns Portal Selection

Setting Up the Returns Portal

1. Add the snippet to your website

2. Modify the data settings

3. Style the widget

Configuring Global Returns Portal Selection