Per poter utilizzare il widget e-mail è necessario partendo dal menu a sinistra cliccare su Direct Marketing -> Widget email

Vi si presenterà l’elenco dei widget configurati.

Sarà possibile cliccare sul pulsante in alto a destra “Nuovo Widget” per creare un widget nuovo o cliccare sul pulsante “Modifica” del widget che ci interessa. In questo caso potremmo scegliere dalla tendina che si aprirà se modificare Configurazione, Condizioni, Template o Personalizzazione.

Ecco nel dettaglio gli step che troveremo da impostare nella creazione di un Widget o selezionando il pulsante “Modifica”.

Configurazione

In questo step sarà possibile configurare i seguenti aspetti del widget:

1. NOME E CONTENUTO
   Nome Widget: Scegli il nome da dare al tuo widget
   Tipo di Contenuto per Recommendation: È un menu a tendina dal quale possiamo scegliere se inserire una raccomandazione per contenuti o prodotti (nel caso il nostro portale gestisca entrambi).
2. CONFIGURA SERVIZIO EMAIL
   Per far funzionare in maniera corretta le raccomandazioni, dobbiamo passare al sistema la mail dell’utente. Se selezioniamo i servizi conosciuti dal primo elenco a tendina, Blendee configurerà automaticamente il token (codice per identificare la mail), altrimenti se selezioniamo personalizzato dovremo inserire il codice, che il nostro sistema sostituirà con la mail dell’utente.
   • Personalizzato: in questo caso, dovremo inserire il token/codice che il sistema sostituirà con la mail dell’utente. Esempio: Quaplà [*EMAIL*]; Magento {{var customer.email}}
   • Mailchimp
   • Bronto
   • Campaign Monitor
   • DotMailer
   • MailUp
   • ContactLab
   • Magnews
   • iContact
   • Vertical Response
   • What Counts
3. SCEGLI LA TIPOLOGIA DI ALGORITMO
   Una volta selezionata la tipologia di contenuto, potremmo selezionare il tipo di algoritmo da utilizzare per le raccomandazioni da visualizzare.
4. ATTIVA IL WIDGET
   Decidi se attivare subito il widget  e renderlo immediatamente disponibile. Conigliamo di attivarlo da subito dato che finchè non sarà integrato il codice all’interno di una email non sarà visibile.

Condizioni

Il secondo passaggio per completare la pubblicazione del widget è completare l’inserimento delle condizioni per le Recommendation.

5. CONDIZIONI OBBLIGATORIE
   Impostiamo le condizioni che tutte le raccomandazioni del nostro widget dovranno rispettare.
6. CONDIZIONI OPZIONALI
   Impostiamo le condizioni secondarie che influenzano i risultati della Recommendation senza escludere quelli che non le possiedono, dando però la priorità agli elementi che presentano tali condizioni.
7. NUMERO DI ELEMENTI
   Scegli il numero di elementi da includere: inseriamo il numero di elementi che vogliamo visualizzare nel widget.

A questo punto, cliccando su “Avanti”, si proseguirà con la scelta del template del widget.

Template

In questo Step è possibile selezionare il template.

Una volta selezionato il template base da cui partire, cliccando sul pulsante “Seleziona” del box corrispondente e cliccando su Avanti, sarà possibile passare alla personalizzazione.

Ricordiamo che è possibile creare un template personalizzato per i widget come per le recommendation, email e behavioural message, andando su Impostazioni -> Gestione Template -> Widget

All’interno della Gestione Template Widget tra i tipi di chiave che troviamo c’è il tipo Hash Color necessario a indicare l’esadecimale del colore scelto per personalizzare il relativo campo. Questo tipo di chiave differisce dal classico color picker, di tipo Color, messo a disposizione da Blendee per selezionare il colore in quanto non include il cancelletto durante la decodifica.

ATTENZIONE: Le chiavi di tipo Hash Color devono essere utilizzate quando il valore è incluso nell’url indicato nel campo href dell’immagine dell’elemento.

Vediamo un esempio. Sotto una parte di codice HTML che trovate all’interno del template base Next Widget Email. Questo div contiene un’immagine la cui sorgente src è una chiamata ai nostri sistemi necessaria a costruire back-end l’elemento da mostrare, che viene ritornato da Blendee in funzione dei parametri passati.

<div class="ADB_rec_column" style="display: inline-table;text-align: center;">
<a [...]>
<img class="adbImageProduct" border="0" height="auto" width="##prod_version##"
src="{*baseUrlRc*}/recommendations/v2/espimage?rc={{rc}}&i={{i}}&e={{emailtoken}}&pv=##prod_version##&pmt=##prod_maintitle_text##&pmtt=##prod_maintitle_truncate_text_after_lines##&pmff=##prod_maintitle_font_family##&pmfs=##prod_maintitle_font_size##&pmfw=##prod_maintitle_font_weight##&pmft=##prod_maintitle_font_style##&pmta=##prod_maintitle_text_align##&pmtd=##prod_maintitle_text_decoration##&pmc=##prod_maintitle_color##&pms=##prod_maintitle_style##&pat=##prod_alternativetitle_text##&patt=##prod_alternativetitle_truncate_text_after_lines##&paff=##prod_alternativetitle_font_family##&pafs=##prod_alternativetitle_font_size##&pafw=##prod_alternativetitle_font_weight##&paft=##prod_alternativetitle_font_style##&pata=##prod_alternativetitle_text_align##&patd=##prod_alternativetitle_text_decoration##&pac=##prod_alternativetitle_color##&pas=##prod_alternativetitle_style##&pd=##price_display##&pdd=##price_display_discount##&pds=##price_decimal_separator##&pff=##price_font_family##&pfs=##price_font_size##&pfw=##price_font_weight##&pft=##price_font_style##&pta=##price_text_align##&ptd=##price_text_decoration##&pc=##price_color##&bgc=##background_color##&pdc=##price_discount_color##&preview={{preview}}"alt="## alt_text_card_rec##" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; height: auto; float: none; clear: both; display: block; margin: 0 auto; border: none; max-width: 100%; max-height: ##prod_version##px">
</a>
</div>

Tra i parametri passati ci sono le personalizzazioni relative allo stile con cui verrà mostrato il prodotto.

Ad esempio la chiave ##prod_maintitle_color## , evidenziata nel codice sopra, si riferisce al valore esadecimale del colore scelto per mostrare il titolo del prodotto. Questa personalizzazione viene inviata con il parametro pmc all’interno della chiamata. In fase di definizione di questa chiave è stato utilizzato il tipo Hash Color e non Color, dato che è posizionata all’interno di un url.

Il codice sopra verrà decodificato e inviato come segue, dove ogni chiave sarà sostituita col valore impostato in fase di personalizzazione:

rc=38094&i=2&e=esempio@gmail.com&pv=250&pmt=name&pmtt=4&pmff=Roboto&pmfs=30&pmfw=bold&pmft=normal&pmta=center&pmtd=none&pmc=3d763d&pms=3&pat=&patt=8&paff=Roboto&pafs=20&pafw=bold&paft=normal&pata=center&patd=none&pac=000000&pas=3&pd=true&pdd=true&pds=.&pff=Roboto&pfs=30&pfw=bold&pft=normal&pta=center&ptd=none&pc=FF9902&bgc=transparent&pdc=FF9902&preview=0

Potrete continuare a utilizzare le chiavi di tipo Color, analogamente a quanto avviene per i template delle recommendation e dei behavioural message, per i valori definiti all’interno del foglio di stile, ad esempio:

.ADB_text {
        color: ##colore_testo_box_testo## !important;
    }

La chiave ##colore_testo_box_testo## è di tipo Color che in fase di personalizzazione permette di aprire il color picker e restituisce il valore esadecimale preceduto dal cancelletto di tale colore.

Personalizzazione

Tornando alla fase di creazione del widget, all’ultimo step, dopo aver selezionato il template che si intende usare, sarà possibile personalizzare l’aspetto grafico delle raccomandazioni mostrate.

Tra i vari elementi configurabili, di particolare interesse, il campo Cosa visualizzare, visibile nello screenshot sottostante, dove è possibile inserire il valore delle sottochiavi relative al prodotto.

L’elenco delle sottochiavi utilizzabili:

• image: Url dell’immagine del prodotto
• priceOriginal: Prezzo originale del Prodotto
• priceDiscounted: Prezzo finale del Prodotto
• priceDelivery: Prezzo di spedizione
• name: Titolo del Prodotto
• descriptionShort: Descrizione Breve del Prodotto
• discount: Percentuale di sconto sul Prodotto
• shopLink: Link al prodotto
• currencySymbol: Simbolo della valuta
• sku: SKU del prodotto
• idExt: Id del prodotto
• brand: Brand del prodotto
• model: Modello del prodotto
• availableQuantity: Quantità disponibile del prodotto
• insertionDate: Id della categorie di appartenenza separati da spazio
• categoryIds: Id delle categorie associate al prodotto separati da virgola.

N.B: La personalizzazione del widget è molto limitata in considerazione del fatto che l’output prodotto è inserito dinamicamente ed andrà iniettato nell’email per cui si prega di seguire/mantenere ove possibile i parametri di default proposti.

Preleva codice

Una volta terminata la personalizzazione del widget email, possiamo prelevare il codice cliccando sul pulsante “Preleva HTML” che si trova nella pagina con l’elenco dei widget email attivi.

Questo codice è stato strutturato per far sì che non arrechi danno in termini di spam o rallentamenti. All’apertura delle e-mail lo script invocherà il sistema Blendee che in tempo reale sceglierà i prodotti più “affini” all’utente corrente, scelti in base all’algoritmo selezionato e le condizioni inserite. L’utente viene individuato grazie al token email indicato al primo step della configurazione. Il sistema genera un set di immagini congrue a quanto richiesto e le inserisce in maniera dinamica all’interno della email al momento dell’apertura.

Preview

Il menu contestuale Preview permette di visualizzare in ogni momento un’ anteprima del risultato finale che verrà mostrato all’utente.

---

Per completezza si veda anche la guida all’uso dei filtri obbligatori / suggeriti.