browserReturns Portal Snippet

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

Setting Up the Returns Portal Snippet

The 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

Setting up parcelLab’s Returns Portal for your online shop is straightforward.

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

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

chevron-rightReturns Portal v1 snippethashtag

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>
chevron-rightReturns Portal v2 snippethashtag

The plugin features automatic environment detection, so you can use the same snippet in your staging and production environments.

<pl-returns-portal
  code="your-portal-code"
  account-name="parcellab-account-name"
>
</pl-returns-portal>

<script
  type="module"
  src="https://returns-app.parcellab.com/static/plugin/js/loader.mjs"
>
</script>

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

2

Modify the data settings

  • Update the data settings for the Returns Portal v1 or v2 plugin and change any default settings where necessary.

chevron-rightReturns Portal v1 data settingshashtag

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

chevron-rightReturns Portal v2 data settingshashtag

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

Data Attribute
Necessity
Description
Example

code

Required

Your unique Returns Portal code.

xt-de

account-name

Required

Your parcelLab user ID or technical account name.

  • 16147742

  • weareparkers

entry-point

Optional

The starting page for the Returns Portal.

Default value is returns, where users start at the order search page.

If the value is set to registration, users will start at the login page.

registration

environment

Optional

This allows you to override the automatic environment detection. Default value is live, and uses the production server.

  • development

  • staging

  • live

lang

Optional

The ISO-2 language code for the initial language to load.

The widget will be displayed in the specified language. This attribute can also be set via URL query parameter (for example: ?lang=de)

de

3

Styling and other configurations

  • Edit the CSS styling (for Returns Portal v1) or configure advanced settings (for Returns Portal v2).

circle-info

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.

For full setup instructions, please refer to the following pages:

  • Returns Portal v1 snippet

browserReturns Portal v1chevron-right
  • Returns Portal v2 snippet

browserReturns Portal v2chevron-right

Supported Languages

The Returns Portal is available with default translations in the following languages. Dates and timestamps are automatically formatted according to the configured country and language for your Returns Portal.

chevron-rightList of supported languageshashtag
  • Albanian

  • Bosnian

  • Bulgarian

  • Chinese (simplified)

  • Croatian

  • Czech

  • Danish

  • Dutch

  • English (UK)

  • English (US)

  • Estonian

  • Finnish

  • French

  • German

  • German (formal)

  • Greek

  • Hungarian

  • Italian

  • Japanese

  • Korean

  • Latvian

  • Lithuanian

  • Norwegian

  • Polish

  • Portuguese

  • Romanian (formal)

  • Serbian (Latin)

  • Slovak

  • Slovenian

  • Spanish

  • Swedish

  • Turkish

circle-info

To modify any of the default translations used in your Returns Portal, please contact your parcelLab representative.

Last updated

Was this helpful?