Configurazioni del portale di ritorno
      Torna alla home page
      1. Knowledge Center
      2. Come iniziare
      3. Configurazioni del portale di ritorno

      Come integrare IF portal in SFCC

      Questa guida spiega come incorporare il portale iF returns all'interno del sito Web o dell'applicazione Salesforce Commerce Cloud (SFCC )utilizzando un iframe e come personalizzarne lingua, dimensioni e colori

      Guida all'integrazione-iF Portal in Iframe

      1. Lingua:

      Il portale supporta più lingue. È possibile impostare la lingua modificando il percorso URL:

      • Tedesco → /de/

      • Inglese → /en/

      • Spagnolo → /es/

      • Francese → /fr/

      • Italiano → /it/

      • Portoghese → /pt/

        Esempio:

        • Portale spagnolo:

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

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

        📌Basta sostituire il codice della lingua nell'URL con una delle opzioni supportate.

         

        📌 Importante: è sempre necessario includere il parametro source=IFRAME nell'URL. Senza di esso, il portale non verrà caricato correttamente all'interno di un iframe. Due parametri di colore possono anche essere passati attraverso l'URL.

         

        2. Dimensione

        È possibile controllare le dimensioni del portale utilizzando gli stili iframe in cui è incorporato.

         Esempio 1-Spazio disponibile completo

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

        👉 L'iframe si espanderà per riempire completamente il suo contenitore padre.

         

        Esempio 2-Contenitore fisso con sfondo

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

        👉 Qui il contenitore ha un'altezza fissa (42rem) e un colore di sfondo personalizzato (#f5d4d7). L'iframe si adatta alle dimensioni del contenitore.

         

        Dimensione minima consigliata per desktop:

        • Larghezza: 900px

        • Altezza: 640px

        ⚡ Portal Il portale è reattivo e si adatterà allo spazio disponibile, ma questi valori sono consigliati per un'esperienza desktop ottimale.

         

        3. Stile

        I colori del portale (️️Il valore deve essere passato senza il simbolo #.) può essere personalizzato passando i seguenti parametri nell'URL:

        • layerColor (Primary):

          • Utilizzato per sfondi generali e sfondi popup

          • Valore predefinito (se non fornito): #f9fafb.

        • accentColor (Secondary):

          • Utilizzato per opzioni selezionabili, sfondi interni e bordi di elementi selezionabili.

          • Valore predefinito (se non fornito): #ffffff.

         Esempio:

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

         

        Fasi di integrazione:

        1. Includere sempre il parametro source=IFRAME con valore IFRAME.

        2. Scegli la lingua corretta (de, en, es, fr, it, or pt).

        3. Definisci i colori del tuo marchio utilizzando layerColor e accentColor.

        4. Incorporare l'iframe nell'applicazione.

          • Per larghezza/altezza completa → utilizzare h-full w-full.

          • Per dimensionamento fisso → avvolgilo all'interno di un contenitore con altezza/larghezza predefinita.

        5. (Facoltativo) Aggiungi un colore di sfondo al contenitore per una migliore corrispondenza del marchio.