Configuraciones del portal de retorno
      Volver al inicio
      1. Knowledge Center
      2. Primeros pasos
      3. Configuraciones del portal de retorno

      Cómo integrar el portal iF en SFCC

      Esta guía explica cómo incrustar el portal de devoluciones iF dentro de su sitio web o aplicación Salesforce Commerce Cloud (SFCC )mediante un iframe y cómo personalizar su idioma, dimensiones y colores

      Guía de Integración-Portal iF en Iframe

      1. Idioma:

      El portal admite varios idiomas. Puede establecer el idioma cambiando la ruta de la URL:

      • Alemán → /de/

      • Inglés → /en/

      • Español → /es/

      • Francés → /fr/

      • Italiano → /it/

      • Portugués → /pt/

        Ejemplos

        • Portal Español:

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

        • Portal Inglés
          • https://go.dev.ifreturns.com/en/marchelacolombine-refund-v2?source=IFRAME

        📌Simplemente reemplace el código de idioma en la URL con una de las opciones admitidas.

         

        📌 Importante: Siempre debe incluir el parámetro source = IFRAME en la URL. Sin él, el portal no se cargará correctamente dentro de un iframe.

        También se pueden pasar dos parámetros de color a través de la URL.

         

        2. Tamaño

        Puede controlar las dimensiones del portal utilizando los estilos de iframe en los que está incrustado.

         Ejemplo 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>

        👉 El iframe se expandirá para llenar completamente su contenedor principal.

         

        Ejemplo 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>

        👉 Aquí el contenedor tiene una altura fija (42rem) y un color de fondo personalizado (#f5d4d7). El iframe se adapta al tamaño del contenedor.

         

        Tamaño mínimo recomendado para escritorio:

        • Ancho: 900px

        • Altura: 640 píxeles

        ⚡ El portal es receptivo y se adaptará al espacio disponible, pero estos valores se recomiendan para una experiencia de escritorio óptima.

         

        3. Estilo

        Los colores del portal (️️El valor debe pasarse sin el símbolo#.) se puede personalizar pasando los siguientes parámetros en la URL:

        • layerColor (Primary):

          • Se utiliza para fondos generales y fondos emergentes.

          • Valor predeterminado (si no se proporciona): #f9fafb.

        • accentColor (Secondary):

          • Se utiliza para opciones seleccionables, fondos internos y bordes de elementos seleccionables.

          • Valor predeterminado (si no se proporciona): #ffffff.

        Ejemplo

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

         

        Pasos de integración:

        1. Incluya siempre el parámetro source = IFRAME con el valor IFRAME.

        2. Elija el idioma correcto (de, en, es, fr, it, or pt).

        3. Defina los colores de su marca usando layerColor y accentColor.

        4. Incruste el iframe en su aplicación.

          • Para ancho/alto completo → usa h-full w-full.

          • Para un tamaño fijo → envuélvalo dentro de un contenedor con alto/ancho predefinido.

        5. (Opcional) Agregue un color de fondo al contenedor para que coincida mejor con la marca.