Return Portal Configurations
      Back to home
      1. Knowledge Center
      2. Getting Started
      3. Return Portal Configurations

      How to integrate iF portal into SFCC

      This guide explains how to embed the iF returns portal inside your Salesforce Commerce Cloud (SFCC )website or application using an iframe, and how to customize its language, dimensions, and colors

      Integration Guide – iF Portal in Iframe

      1. Language:

      The portal supports multiple languages. You can set the language by changing the URL path:

      • German → /de/

      • English → /en/

      • Spanish → /es/

      • French → /fr/

      • Italian → /it/

      • Portuguese → /pt/

        Examples:

        • Spanish portal:

          • https://go.dev.ifreturns.com/es/marchelacolombine-refund-v2?source=IFRAME

        •  English portal:
          • https://go.dev.ifreturns.com/en/marchelacolombine-refund-v2?source=IFRAME

        📌Simply replace the language code in the URL with one of the supported options.

         

        📌 Important: You must always include the parameter source=IFRAME in the URL. Without it, the portal will not load correctly inside an iframe.

        Two color parameters can also be passed through the URL.

         

        2. Size

        You can control the portal’s dimensions using the iframe styles in which it is embedded.

         Example 1 – Full available space

        <iframe
          class="h-full w-full"
          src="https://go.dev.ifreturns.com/es/marchelacolombine-refund-v2?source=IFRAME&layerColor=D1FAE5&accentColor=ECFDF5"
        ></iframe>

        👉 The iframe will expand to fill its parent container completely.

         

        Example 2 – Fixed container with background

        <div class="h-[42rem] w-full bg-[#f5d4d7]">

            <iframe

                class="h-full w-full"                                                                                                         src="https://go.dev.ifreturns.com/es/marchelacolombine-refund-v2?                        source=IFRAME&layerColor=D1FAE5&accentColor=ECFDF5"

              ></iframe>

        </div>

        👉 Here the container has a fixed height (42rem) and a custom background color (#f5d4d7). The iframe adapts to the container size.

         

        Recommended minimum size for desktop:

        • Width: 900px

        • Height: 640px

        ⚡ The portal is responsive and will adapt to the available space, but these values are recommended for an optimal desktop experience.

         

        3. Style

        The portal colors(⚠️ The value must be passed without the # symbol.) can be customized by passing the following parameters in the URL:

        • layerColor (Primary):

          • Used for general backgrounds and popup backgrounds.

          • Default value (if not provided): #f9fafb.

        • accentColor (Secondary):

          • Used for selectable options, inner backgrounds, and borders of selectable elements.

          • Default value (if not provided): #ffffff.

        Example:

        https://go.dev.ifreturns.com/en/marchelacolombine-refund-v2?source=IFRAME&layerColor=D1FAE5&accentColor=ECFDF5

         

        Integration steps:

        1. Always include the parameter source=IFRAME with value IFRAME.

        2. Choose the correct language (de, en, es, fr, it, or pt).

        3. Define your brand colors using layerColor and accentColor.

        4. Embed the iframe in your application.

          • For full width/height → use h-full w-full.

          • For fixed sizing → wrap it inside a container with predefined height/width.

        5. (Optional) Add a background color to the container for a better brand match.