(PROMIUM FAQ insieme a PROMIUM FORM compone la soluzione completa per i contatti web mediati dalla AI, PROMIUM WEB CONTACT)

Introduzione PROMIUM FAQ

Il sistema FAQ Promium offre un’interfaccia di ricerca intelligente e interattiva che può essere facilmente integrata nel tuo sito web. Il widget può presentarsi in tre modalità: una barra di ricerca completa, un pulsante minimale che si espande in un’interfaccia completa, oppure agganciato a elementi DOM personalizzati.

Caratteristiche principali:

  • Interfaccia responsive e adattiva con tre modalità di visualizzazione (default/minimal/custom-listener)
  • Supporto per temi chiari e scuri con rilevamento automatico
  • Posizionamento flessibile (center, left, right)
  • Dimensioni personalizzabili (width/height)
  • Integrazione seamless con il tuo sito
  • Supporto per container specifici
  • Traduzione automatica multilingue (100+ lingue via Google Translate)
  • Rilevamento automatico della lingua del browser
  • Sistema di retry intelligente per traduzioni affidabili
  • Modalità custom-listener per integrazione avanzata su elementi personalizzati

⚠️ Posizionamento dello Script

Scenario 1: Utilizzo con data-target (Raccomandato)

Quando si utilizza l’attributo data-target, inserire lo script prima della chiusura del tag</body>:

<div id="faq-container"></div>

<!-- Posizionare prima della chiusura del body -->
<script 
    src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="nome-azienda" 
    data-target="faq-container" 
    async defer></script>
</body>

Scenario 2: Utilizzo senza data-target

Inserire lo script direttamente nel punto del DOM dove si desidera che appaia il widget:

<div class="header">
    <!-- Altri elementi dell'header -->
    <script 
        src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
        data-id="nome-azienda" 
        data-mode="minimal" 
        async defer></script>
    <!-- Altri elementi dell'header -->
</div>

Scenario 3: Utilizzo con custom-listener

Quando si utilizza la modalità custom-listener, lo script può essere posizionato ovunque poiché si aggancie a un elemento trigger specifico:

<button id="apri-faq" class="btn btn-help">Aiuto</button>

<script 
    src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="nome-azienda" 
    data-mode="custom-listener"
    data-faq-trigger="#apri-faq"
    async defer></script>

Opzioni di Configurazione

Il widget può essere personalizzato attraverso i seguenti attributi data:

Attributo Valori Default Descrizione
data-id stringa – Identificativo dell’azienda (obbligatorio)
data-mode “default” | “minimal” | “custom-listener” “default” Modalità di visualizzazione (barra completa / bottone / elemento personalizzato)
data-theme “light” | “dark” “light” Tema dell’interfaccia
data-position “center” | “left” | “right” “center” Posizionamento della barra/bottone (non applicabile in custom-listener)
data-target selettore CSS – Selettore dell’elemento dove inserire il widget (non usare con custom-listener)
data-width CSS width “100%” Larghezza del widget (es: “400px”, “50%”)
data-height CSS height “90px” Altezza del widget (es: “60px”) – ignorato in custom-listener per il container principale
data-translatetolang codice ISO 639-1 – Lingua per traduzione automatica (es: “en”, “es”, “fr”)
data-faq-trigger selettore CSS – Selettore dell’elemento trigger (obbligatorio in modalità custom-listener)

Esempi di Configurazione

1. Configurazione Base

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    async defer></script>

2. Modalità Minimal con Posizionamento

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    data-mode="minimal"
    data-position="right"
    data-width="150px"
    async defer></script>

3. Configurazione Completa (Default)

<div id="faq-container"></div>
<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    data-mode="default"
    data-theme="dark"
    data-position="left"
    data-target="faq-container"
    data-width="500px"
    data-height="70px"
    async defer></script>

4. Con Traduzione Automatica in Inglese

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    data-translatetolang="en"
    async defer></script>

5. Configurazione Avanzata Multilingue

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    data-mode="default"
    data-theme="dark"
    data-position="center"
    data-translatetolang="es"
    async defer></script>

6. Modalità Custom-Listener con Elemento Personalizzato

<button id="apri-faq" class="btn btn-help">Aiuto</button>

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    data-mode="custom-listener"
    data-faq-trigger="#apri-faq"
    data-theme="dark"
    async defer></script>

7. Custom-Listener con Traduzione Automatica

<nav>
    <a href="#home">Home</a>
    <a href="#servizi">Servizi</a>
    <a id="nav-faq" href="javascript:void(0)">FAQ</a>
</nav>

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech" 
    data-mode="custom-listener"
    data-faq-trigger="#nav-faq"
    data-translatetolang="en"
    async defer></script>

🌐 Traduzione Automatica Multilingue

Nuova Funzionalità: Il widget PROMIUM FAQ supporta ora la traduzione automatica in oltre 100 lingue tramite Google Translate. Con un semplice attributo HTML, le tue FAQ possono essere tradotte automaticamente nella lingua preferita dai tuoi utenti, offrendo un’esperienza completamente localizzata senza alcuna configurazione complessa.

Come Funziona

Quando l’utente apre il pannello FAQ, il sistema rileva automaticamente l’attributo de>data-translatetolang e applica la traduzione nella lingua specificata. Il processo avviene in modo trasparente e richiede solo 1-5 secondi, garantendo un’esperienza utente fluida e professionale.

Utilizzo Base

Aggiungi semplicemente l’attributo de>data-translatetolang con il codice della lingua desiderata:

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="nome-azienda"
    data-translatetolang="en"></script>

Lingue Supportate

Il widget supporta oltre 100 lingue tramite Google Translate. Ecco le principali:

Codice Lingua Esempio Utilizzo
it 🇮🇹 Italiano data-translatetolang=”it”
ab 🏳️ Abcaso data-translatetolang=”ab”
ace 🏳️ Accinese data-translatetolang=”ace”
ach 🏳️ Acioli data-translatetolang=”ach”
aa 🇩🇯 Afar data-translatetolang=”aa”
af 🇿🇦 Afrikaans data-translatetolang=”af”
sq 🇦🇱 Albanese data-translatetolang=”sq”
alz 🏳️ Alur data-translatetolang=”alz”
am 🇪🇹 Amarico data-translatetolang=”am”
ar 🇸🇦 Arabo data-translatetolang=”ar”
hy 🇦🇲 Armeno data-translatetolang=”hy”
as 🇮🇳 Assamese data-translatetolang=”as”
av 🇷🇺 Avaro data-translatetolang=”av”
awa 🇮🇳 Awadhi data-translatetolang=”awa”
ay 🇧🇴 Aymara data-translatetolang=”ay”
az 🇦🇿 Azero data-translatetolang=”az”
ban 🇮🇩 Balinese data-translatetolang=”ban”
bm 🇲🇱 Bambara data-translatetolang=”bm”
eu 🇪🇸 Basco data-translatetolang=”eu”
ba 🇷🇺 Bashkir data-translatetolang=”ba”
btx 🇮🇩 Batak karo data-translatetolang=”btx”
bts 🇮🇩 Batak simalungun data-translatetolang=”bts”
bbc 🇮🇩 Batak toba data-translatetolang=”bbc”
bci 🇨🇮 Baulé data-translatetolang=”bci”
bal 🇵🇰 Beluci data-translatetolang=”bal”
bn 🇧🇩 Bengalese data-translatetolang=”bn”
bew 🇮🇩 Betawi data-translatetolang=”bew”
bho 🇮🇳 Bhojpuri data-translatetolang=”bho”
bik 🇵🇭 Bicol data-translatetolang=”bik”
be 🇧🇾 Bielorusso data-translatetolang=”be”
my 🇲🇲 Birmano data-translatetolang=”my”
bs 🇧🇦 Bosniaco data-translatetolang=”bs”
br 🇫🇷 Bretone data-translatetolang=”br”
bg 🇧🇬 Bulgaro data-translatetolang=”bg”
bua 🇷🇺 Buriat data-translatetolang=”bua”
yue 🇭🇰 Cantonese data-translatetolang=”yue”
ca 🇪🇸 Catalano data-translatetolang=”ca”
ceb 🇵🇭 Cebuano data-translatetolang=”ceb”
ce 🇷🇺 Ceceno data-translatetolang=”ce”
cs 🇨🇿 Ceco data-translatetolang=”cs”
ch 🇬🇺 Chamorro data-translatetolang=”ch”
ny 🇲🇼 Chichewa data-translatetolang=”ny”
cgg 🇺🇬 Chiga data-translatetolang=”cgg”
ky 🇰🇬 Chirghiso data-translatetolang=”ky”
chk 🇫🇲 Chuukese data-translatetolang=”chk”
ak 🇬🇭 Ci data-translatetolang=”ak”
zh-CN 🇨🇳 Cinese (semplificato) data-translatetolang=”zh-CN”
zh-TW 🇹🇼 Cinese (tradizionale) data-translatetolang=”zh-TW”
cv 🇷🇺 Ciuvascio data-translatetolang=”cv”
ko 🇰🇷 Coreano data-translatetolang=”ko”
co 🇫🇷 Corso data-translatetolang=”co”
crs 🇸🇨 Creolo delle Seychelles data-translatetolang=”crs”
ht 🇭🇹 Creolo haitiano data-translatetolang=”ht”
mfe 🇲🇺 Creolo mauriziano data-translatetolang=”mfe”
hr 🇭🇷 Croato data-translatetolang=”hr”
ku 🇹🇷 Curdo (Kurmanji) data-translatetolang=”ku”
ckb 🇮🇶 Curdo (Sorani) data-translatetolang=”ckb”
da 🇩🇰 Danese data-translatetolang=”da”
fa-AF 🇦🇫 Dari data-translatetolang=”fa-AF”
dv 🇲🇻 Dhivehi data-translatetolang=”dv”
din 🇸🇸 Dinka data-translatetolang=”din”
dyu 🇨🇮 Diula data-translatetolang=”dyu”
doi 🇮🇳 Dogri data-translatetolang=”doi”
dov 🏳️ Dombe data-translatetolang=”dov”
dz 🇧🇹 Dzongkha data-translatetolang=”dz”
iw 🇮🇱 Ebraico data-translatetolang=”iw”
eo 🏳️ Esperanto data-translatetolang=”eo”
et 🇪🇪 Estone data-translatetolang=”et”
ee 🇬🇭 Ewe data-translatetolang=”ee”
fo 🇫🇴 Faroese data-translatetolang=”fo”
fj 🇫🇯 Figiano data-translatetolang=”fj”
tl 🇵🇭 Filippino data-translatetolang=”tl”
fi 🇫🇮 Finlandese data-translatetolang=”fi”
fon 🇧🇯 Fon data-translatetolang=”fon”
fr 🇫🇷 Francese data-translatetolang=”fr”
fr-CA 🇨🇦 Francese (Canada) data-translatetolang=”fr-CA”
fy 🇳🇱 Frisone data-translatetolang=”fy”
fur 🇮🇹 Friulano data-translatetolang=”fur”
ff 🇸🇳 Fulah data-translatetolang=”ff”
gaa 🇬🇭 Ga data-translatetolang=”gaa”
gd 🏴󠁧󠁢󠁳󠁣󠁴󠁿 Gaelico scozzese data-translatetolang=”gd”
gl 🇪🇸 Galiziano data-translatetolang=”gl”
cy 🏴󠁧󠁢󠁷󠁬󠁳󠁿 Gallese data-translatetolang=”cy”
ka 🇬🇪 Georgiano data-translatetolang=”ka”
ja 🇯🇵 Giapponese data-translatetolang=”ja”
jw 🇮🇩 Giavanese data-translatetolang=”jw”
el 🇬🇷 Greco data-translatetolang=”el”
gn 🇵🇾 Guaraní data-translatetolang=”gn”
gu 🇮🇳 Gujarati data-translatetolang=”gu”
cnh 🇲🇲 Hakha Chin data-translatetolang=”cnh”
ha 🇳🇬 Hausa data-translatetolang=”ha”
haw 🇺🇸 Hawaiano data-translatetolang=”haw”
hi 🇮🇳 Hindi data-translatetolang=”hi”
hmn 🏳️ Hmong data-translatetolang=”hmn”
hrx 🇧🇷 Hunsrik data-translatetolang=”hrx”
iba 🇲🇾 Iban data-translatetolang=”iba”
ig 🇳🇬 Igbo data-translatetolang=”ig”
ilo 🇵🇭 Ilocano data-translatetolang=”ilo”
hil 🇵🇭 Ilongo data-translatetolang=”hil”
id 🇮🇩 Indonesiano data-translatetolang=”id”
en 🇬🇧 Inglese data-translatetolang=”en”
iu-Latn 🇨🇦 Inuktut (latino) data-translatetolang=”iu-Latn”
iu 🇨🇦 Inuktut (sillabico) data-translatetolang=”iu”
ga 🇮🇪 Irlandese data-translatetolang=”ga”
is 🇮🇸 Islandese data-translatetolang=”is”
kac 🇲🇲 Jingpo data-translatetolang=”kac”
kl 🇬🇱 Kalaallisut data-translatetolang=”kl”
kn 🇮🇳 Kannada data-translatetolang=”kn”
kr 🇳🇬 Kanuri data-translatetolang=”kr”
pam 🇵🇭 Kapampangan data-translatetolang=”pam”
kk 🇰🇿 Kazako data-translatetolang=”kk”
kha 🇮🇳 Khasi data-translatetolang=”kha”
km 🇰🇭 Khmer data-translatetolang=”km”
rw 🇷🇼 Kinyarwanda data-translatetolang=”rw”
ktu 🇨🇩 Kituba data-translatetolang=”ktu”
trp 🇮🇳 Kokborok data-translatetolang=”trp”
kv 🇷🇺 Komi data-translatetolang=”kv”
kg 🇨🇩 Kongo data-translatetolang=”kg”
gom 🇮🇳 Konkani data-translatetolang=”gom”
kri 🇸🇱 Krio data-translatetolang=”kri”
lo 🇱🇦 Lao data-translatetolang=”lo”
la 🇻🇦 Latino data-translatetolang=”la”
ltg 🇱🇻 Letgallo data-translatetolang=”ltg”
lv 🇱🇻 Lettone data-translatetolang=”lv”
lij 🇮🇹 Ligure data-translatetolang=”lij”
li 🇳🇱 Limburghese data-translatetolang=”li”
ln 🇨🇩 Lingala data-translatetolang=”ln”
lt 🇱🇹 Lituano data-translatetolang=”lt”
lmo 🇮🇹 Lombardo data-translatetolang=”lmo”
lg 🇺🇬 Luganda data-translatetolang=”lg”
luo 🇰🇪 Luo data-translatetolang=”luo”
lb 🇱🇺 Lussemburghese data-translatetolang=”lb”
mk 🇲🇰 Macedone data-translatetolang=”mk”
mad 🇮🇩 Madurese data-translatetolang=”mad”
mai 🇮🇳 Maithili data-translatetolang=”mai”
mak 🇮🇩 Makasar data-translatetolang=”mak”
ml 🇮🇳 Malayalam data-translatetolang=”ml”
ms 🇲🇾 Malese data-translatetolang=”ms”
ms-Arab 🇲🇾 Malese (Jawi) data-translatetolang=”ms-Arab”
mg 🇲🇬 Malgascio data-translatetolang=”mg”
mt 🇲🇹 Maltese data-translatetolang=”mt”
mam 🇬🇹 Mam data-translatetolang=”mam”
gv 🇮🇲 Manx data-translatetolang=”gv”
mi 🇳🇿 Maori data-translatetolang=”mi”
mr 🇮🇳 Marathi data-translatetolang=”mr”
chm 🇷🇺 Mari Meadow data-translatetolang=”chm”
mh 🇲🇭 Marshallese data-translatetolang=”mh”
mwr 🇮🇳 Marwari data-translatetolang=”mwr”
yua 🇲🇽 Maya yucateco data-translatetolang=”yua”
mni-Mtei 🇮🇳 Meiteilon (Manipuri) data-translatetolang=”mni-Mtei”
min 🇮🇩 Menangkabau data-translatetolang=”min”
lus 🇮🇳 Mizo data-translatetolang=”lus”
mn 🇲🇳 Mongolo data-translatetolang=”mn”
bm-Nkoo 🇬🇳 N’Ko data-translatetolang=”bm-Nkoo”
nhe 🇲🇽 Nahuatl (Huasteca orientale) data-translatetolang=”nhe”
ndc-ZW 🇿🇼 Ndau data-translatetolang=”ndc-ZW”
nr 🇿🇦 Ndebele del sud data-translatetolang=”nr”
new 🇳🇵 Nepalbhasa (newari) data-translatetolang=”new”
ne 🇳🇵 Nepalese data-translatetolang=”ne”
no 🇳🇴 Norvegese data-translatetolang=”no”
nus 🇸🇸 Nuer data-translatetolang=”nus”
oc 🇫🇷 Occitano data-translatetolang=”oc”
or 🇮🇳 Odia (Oriya) data-translatetolang=”or”
nl 🇳🇱 Olandese data-translatetolang=”nl”
om 🇪🇹 Oromo data-translatetolang=”om”
os 🇷🇺 Osseto data-translatetolang=”os”
pag 🇵🇭 Pangasinan data-translatetolang=”pag”
pap 🇦🇼 Papiamento data-translatetolang=”pap”
ps 🇦🇫 Pashto data-translatetolang=”ps”
jam 🇯🇲 Patois giamaicano data-translatetolang=”jam”
fa 🇮🇷 Persiano data-translatetolang=”fa”
pl 🇵🇱 Polacco data-translatetolang=”pl”
pt 🇧🇷 Portoghese (Brasile) data-translatetolang=”pt”
pt-PT 🇵🇹 Portoghese (Portogallo) data-translatetolang=”pt-PT”
pa 🇮🇳 Punjabi (Gurmukhi) data-translatetolang=”pa”
pa-Arab 🇵🇰 Punjabi (Shahmukhi) data-translatetolang=”pa-Arab”
kek 🇬🇹 Q’eqchi’ data-translatetolang=”kek”
qu 🇵🇪 Quechua data-translatetolang=”qu”
rom 🏳️ Romanì data-translatetolang=”rom”
ro 🇷🇴 Rumeno data-translatetolang=”ro”
rn 🇧🇮 Rundi data-translatetolang=”rn”
ru 🇷🇺 Russo data-translatetolang=”ru”
se 🇳🇴 Sami del nord data-translatetolang=”se”
sm 🇼🇸 Samoano data-translatetolang=”sm”
sg 🇨🇫 Sango data-translatetolang=”sg”
sa 🇮🇳 Sanscrito data-translatetolang=”sa”
sat-Latn 🇮🇳 Santali (latino) data-translatetolang=”sat-Latn”
sat 🇮🇳 Santali (Ol Chiki) data-translatetolang=”sat”
nso 🇿🇦 Sepedi data-translatetolang=”nso”
sr 🇷🇸 Serbo data-translatetolang=”sr”
st 🇱🇸 Sesotho data-translatetolang=”st”
shn 🇲🇲 Shan data-translatetolang=”shn”
sn 🇿🇼 Shona data-translatetolang=”sn”
scn 🇮🇹 Siciliano data-translatetolang=”scn”
sd 🇵🇰 Sindhi data-translatetolang=”sd”
si 🇱🇰 Singalese data-translatetolang=”si”
szl 🇵🇱 Slesiano data-translatetolang=”szl”
sk 🇸🇰 Slovacco data-translatetolang=”sk”
sl 🇸🇮 Sloveno data-translatetolang=”sl”
so 🇸🇴 Somalo data-translatetolang=”so”
es 🇪🇸 Spagnolo data-translatetolang=”es”
su 🇮🇩 Sundanese data-translatetolang=”su”
sus 🇬🇳 Susu data-translatetolang=”sus”
sv 🇸🇪 Svedese data-translatetolang=”sv”
sw 🇹🇿 Swahili data-translatetolang=”sw”
ss 🇸🇿 Swati data-translatetolang=”ss”
tg 🇹🇯 Tagico data-translatetolang=”tg”
ty 🇵🇫 Taitiano data-translatetolang=”ty”
ber-Latn 🇲🇦 Tamazight data-translatetolang=”ber-Latn”
ber 🇲🇦 Tamazight (Tifinagh) data-translatetolang=”ber”
ta 🇮🇳 Tamil data-translatetolang=”ta”
tt 🇷🇺 Tataro data-translatetolang=”tt”
crh 🇺🇦 Tataro di Crimea (cirillico) data-translatetolang=”crh”
crh-Latn 🇺🇦 Tataro di Crimea (latino) data-translatetolang=”crh-Latn”
de 🇩🇪 Tedesco data-translatetolang=”de”
te 🇮🇳 Telugu data-translatetolang=”te”
tet 🇹🇱 Tetum data-translatetolang=”tet”
th 🇹🇭 Thai data-translatetolang=”th”
bo 🇨🇳 Tibetano data-translatetolang=”bo”
ti 🇪🇷 Tigrino data-translatetolang=”ti”
tiv 🇳🇬 Tiv data-translatetolang=”tiv”
tpi 🇵🇬 Tok pisin data-translatetolang=”tpi”
to 🇹🇴 Tongano data-translatetolang=”to”
lua 🇨🇩 Tshiluba data-translatetolang=”lua”
ts 🇿🇦 Tsonga data-translatetolang=”ts”
tn 🇧🇼 Tswana data-translatetolang=”tn”
tcy 🇮🇳 Tulu data-translatetolang=”tcy”
tum 🇲🇼 Tumbuka data-translatetolang=”tum”
tr 🇹🇷 Turco data-translatetolang=”tr”
tk 🇹🇲 Turkmeno data-translatetolang=”tk”
tyv 🇷🇺 Tuvinian data-translatetolang=”tyv”
uk 🇺🇦 Ucraino data-translatetolang=”uk”
udm 🇷🇺 Udmurt data-translatetolang=”udm”
ug 🇨🇳 Uiguro data-translatetolang=”ug”
hu 🇭🇺 Ungherese data-translatetolang=”hu”
ur 🇵🇰 Urdu data-translatetolang=”ur”
uz 🇺🇿 Uzbeco data-translatetolang=”uz”
ve 🇿🇦 Venda data-translatetolang=”ve”
vec 🇮🇹 Veneziano data-translatetolang=”vec”
vi 🇻🇳 Vietnamita data-translatetolang=”vi”
war 🇵🇭 Waray data-translatetolang=”war”
bem 🇿🇲 Wemba data-translatetolang=”bem”
wo 🇸🇳 Wolof data-translatetolang=”wo”
xh 🇿🇦 Xhosa data-translatetolang=”xh”
sah 🇷🇺 Yakut data-translatetolang=”sah”
yi 🏳️ Yiddish data-translatetolang=”yi”
yo 🇳🇬 Yoruba data-translatetolang=”yo”
zap 🇲🇽 Zapotec data-translatetolang=”zap”
zu 🇿🇦 Zulu data-translatetolang=”zu”

E oltre 80+ altre lingue supportate!

Esempi Avanzati

Traduzione con Tema Scuro

<script src="https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js" 
    data-id="i-tech"
    data-theme="dark"
    data-translatetolang="es"></script>

Rilevamento Automatico Lingua Browser

Per rilevare automaticamente la lingua preferita del browser dell’utente:

<script>
    // Rileva la lingua del browser
    const browserLang = navigator.language.split('-')[0]; // es: 'en', 'it', 'es'
    
    // Crea lo script tag dinamicamente
    const script = document.createElement('script');
    script.src = 'https://promium-embed.s3.amazonaws.com/promium_embed/faq_ui/faqexternal.js';
    script.setAttribute('data-id', 'i-tech');
    script.setAttribute('data-translatetolang', browserLang);
    document.head.appendChild(script);
</script>

Siti Multilingue

Per siti web con versioni in diverse lingue:

<!-- Versione Italiana -->
<script src="..." data-id="i-tech" data-translatetolang="it"></script>

<!-- Versione Inglese -->
<script src="..." data-id="i-tech" data-translatetolang="en"></script>

<!-- Versione Spagnola -->
<script src="..." data-id="i-tech" data-translatetolang="es"></script>

Caratteristiche Tecniche

  • Automatico: La traduzione si applica automaticamente all’apertura del modale FAQ
  • Retry Intelligente: Sistema con 15 tentativi (300ms ciascuno) per garantire l’applicazione della traduzione anche con connessioni lente
  • Gestione Errori: Robusto error handling che continua a funzionare anche se Google Translate non è disponibile
  • Debug Mode: Console logging dettagliato con emoji per identificare rapidamente gli eventi (🌐 traduzione, ✅ successo, ❌ errori)
  • Performance: Impatto minimo sul caricamento della pagina (~150 linee di codice aggiuntive)
  • Sicurezza: XSS-safe e CORS-compliant, nessuna iniezione di codice
  • Compatibilità: Funziona su tutti i browser moderni (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
  • Multimodale: Funziona con tutte le modalità di visualizzazione (default, minimal, custom-listener)

Flusso di Esecuzione

  1. Caricamento dello Script: Lo script rileva l’attributo de>data-translatetolang
  2. Apertura del Modale: L’utente clicca sul pulsante “Cerca FAQ” (o elemento trigger in custom-listener)
  3. Caricamento iframe: Il contenuto FAQ viene caricato nell’iframe
  4. Ricerca Dropdown: Il sistema cerca il dropdown di Google Translate
  5. Selezione Lingua: Seleziona automaticamente la lingua specificata
  6. Attivazione Traduzione: Simula gli eventi di interazione utente
  7. Pagina Tradotta: L’esperienza FAQ è completamente localizzata

Best Practices

✅ Da Fare

  • Usa codici lingua ufficiali ISO 639-1 (es: de>en, de>es, de>fr)
  • Testa la traduzione su diversi browser prima del deploy
  • Verifica che Google Translate sia disponibile nella tua regione
  • Combina l’attributo con altri parametri di configurazione per massima personalizzazione
  • Monitora la console del browser per eventuali warning o errori

❌ Da Evitare

  • Non usare codici lingua errati (es: de>eng invece di de>en)
  • Non assumere che il widget funzioni senza Google Translate disponibile
  • Non sovrascrivere manualmente la traduzione durante il caricamento
  • Non usare caratteri speciali nel codice lingua

Monitoraggio e Debug

Per verificare il corretto funzionamento della traduzione automatica, apri la Console del Browser (F12) e cerca i seguenti messaggi:

🌐 Lingua traduzione automatica: en
🌐 Tentativo di applicazione della traduzione automatica...
🔄 Tentativo 1/15 per trovare il dropdown di Google Translate...
✅ Traduzione automatica applicata: en

Tutti gli eventi sono registrati con emoji per una facile identificazione:

  • 🌐 = Azioni di traduzione
  • ✅ = Operazione completata con successo
  • 🔄 = Tentativo/Retry in corso
  • ⚠️ = Avviso (non critico)
  • ❌ = Errore che richiede attenzione

Modalità di Visualizzazione

Modalità Default

  • Mostra una barra di ricerca completa con input text
  • Include ombreggiatura e effetti hover
  • Ideale per pagine FAQ dedicate
  • Compatibile con traduzione automatica
  • Supporto per data-target per posizionamento personalizzato

Modalità Minimal

  • Mostra solo un bottone “Cerca” in stile minimal
  • Design pulito senza ombreggiature
  • Perfetto per header o sidebar
  • Supporta traduzione automatica multilingue
  • Occupazione minima dello spazio nel layout

Modalità Custom-Listener

  • Agganciamento a qualsiasi elemento DOM existente tramite selettore CSS
  • Nessun container o interfaccia automatica generata
  • Modale si apre esclusivamente al click dell’elemento trigger
  • Massima flessibilità di design e posizionamento
  • Ideale per integrare FAQ su elementi di navigazione personalizzati
  • Supporta traduzione automatica come le altre modalità
  • Evita duplicazione di elementi nel DOM

Modalità Custom-Listener: Documentazione Tecnica Completa

Panoramica

La modalità custom-listener consente di integrare il widget FAQ di Promium agganciandolo a qualsiasi elemento DOM esistente tramite un selettore CSS, senza creare container o interfacce automatiche. Il modale si apre esclusivamente quando l’utente interagisce con l’elemento trigger specificato.

Caso d’Uso

Utilizzi ideali:

  • Integrare FAQ su pulsanti di aiuto esistenti
  • Attivare FAQ da elementi di navigazione personalizzati
  • Agganciare FAQ a link o icone già presenti nel layout
  • Evitare duplicazione di elementi DOM
  • Mantenere piena libertà di design e posizionamento

Sintassi Base

<button id="apri-faq" class="btn btn-help">Aiuto</button>

<script src="faqexternal.js"
    data-id="azienda"
    data-mode="custom-listener"
    data-faq-trigger="#apri-faq"
    data-theme="light"
    data-translatetolang="en"
    async defer></script>

Parametri Specifici

Parametro Valore Descrizione
data-mode custom-listener Attiva la modalità custom-listener
data-faq-trigger Selettore CSS Elemento su cui agganciare l’event listener di apertura del modale (obbligatorio)

Selettori Supportati

<!-- ID -->
<script data-faq-trigger="#id-elemento"></script>

<!-- Classe -->
<script data-faq-trigger=".classe-elemento"></script>

<!-- Selettore attributo -->
<script data-faq-trigger="[data-role='faq']"></script>

<!-- Selettore composto -->
<script data-faq-trigger="button.help-btn[data-type='faq']"></script>

Comportamento Tecnico

Fase di Inizializzazione:

  • Lo script legge l’attributo data-faq-trigger dal tag <script>
  • Crea il modale container (#promium-faq-modal-container) e overlay (#promium-faq-modal-overlay)
  • NON crea il container principale (#promium-faq-container)
  • NON crea l’iframe minimale iniziale
  • Registra un event listener su tutti gli elementi corrispondenti al selettore data-faq-trigger

Fase di Attivazione (al click del trigger):

  • Utente clicca l’elemento trigger
  • Funzione openModal() viene invocata
  • L’iframe FAQ viene creato e inserito nel modale container
  • Lo scroll della pagina viene disabilitato (overflow: hidden)
  • Il modale appare con la pagina FAQ caricata

Fase di Chiusura:

  • Utente clicca il pulsante di chiusura o l’overlay
  • Funzione closeModal() viene invocata
  • L’iframe viene rimosso dal DOM
  • Lo scroll della pagina viene ripristinato
  • Lo stato del modale viene resettato

Compatibilità della Modalità Custom-Listener

La modalità custom-listener è pienamente compatibile con:

  • ✅ data-theme (light/dark)
  • ✅ data-translatetolang (traduzione automatica)
  • ✅ data-width e data-height (dimensioni modale)
  • ✅ data-id (identificativo aziendale)
  • ✅ Tutti i messaggi postMessage da parent a child

Differenze tra le Modalità

Aspetto Default Minimal Custom-Listener
Container principale ✅ Creato ✅ Creato ❌ Non creato
iframe minimale ✅ Visibile ✅ Visibile ❌ Non creato
Trigger Widget GUI Widget GUI Elemento personalizzato
Apertura modale Click automatico Click barra ricerca Click su elemento specifico
Flessibilità design Bassa Media Alta
Utilità ideale Pagine dedicate Header/Sidebar Integrazione avanzata

Esempi Avanzati

Esempio 1: Pulsante di Help Corner

<style>
    .help-corner {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    .help-corner:hover {
        background-color: #0056b3;
    }
</style>

<button class="help-corner" id="help-btn">
    <i class="fas fa-question-circle"></i> Aiuto
</button>

<script src="faqexternal.js"
    data-id="miazienda"
    data-mode="custom-listener"
    data-faq-trigger="#help-btn"
    data-theme="dark"></script>

Esempio 2: Link nella Navbar

<nav>
    <a href="#home">Home</a>
    <a href="#servizi">Servizi</a>
    <a id="nav-faq" href="javascript:void(0)">FAQ</a>
</nav>

<script src="faqexternal.js"
    data-id="azienda"
    data-mode="custom-listener"
    data-faq-trigger="#nav-faq"
    data-translatetolang="en"></script>

Esempio 3: Icona in Header

<header>
    <h1>I-Tech</h1>
    <button class="icon-btn" data-help="faq">
        <i class="fas fa-info-circle"></i>
    </button>
</header>

<script src="faqexternal.js"
    data-id="i-tech"
    data-mode="custom-listener"
    data-faq-trigger="button[data-help='faq']"></script>

Esempio 4: Multiple Trigger su Pagina

<!-- Trigger nel header -->
<button class="help-trigger">Aiuto 1</button>

<!-- Trigger nel footer -->
<button class="help-trigger">Aiuto 2</button>

<!-- Un singolo script aggancia entrambi -->
<script src="faqexternal.js"
    data-id="azienda"
    data-mode="custom-listener"
    data-faq-trigger=".help-trigger"
    data-theme="dark"></script>

Esempio 5: Custom-Listener con Traduzione Dinamica

<div id="language-selector">
    <select id="lang-select">
        <option value="it">Italiano</option>
        <option value="en">English</option>
        <option value="es">Español</option>
    </select>
</div>

<button id="open-faq">Domande Frequenti</button>

<script>
    // Carica il widget con traduzione dinamica
    const langSelect = document.getElementById('lang-select');
    const selectedLang = langSelect.value;
    
    const script = document.createElement('script');
    script.src = 'faqexternal.js';
    script.setAttribute('data-id', 'azienda');
    script.setAttribute('data-mode', 'custom-listener');
    script.setAttribute('data-faq-trigger', '#open-faq');
    script.setAttribute('data-translatetolang', selectedLang);
    document.head.appendChild(script);
</script>

Note Importanti

  • Elemento deve esistere: L’elemento specificato in data-faq-trigger deve essere presente nel DOM prima che lo script FAQ si carichi. Per elementi caricati dinamicamente, assicurati di posizionare lo script FAQ dopo il caricamento dell’elemento trigger.
  • Selettore univoco: Usa selettori che identifichino univocamente l’elemento trigger. Se il selettore corrisponde a più elementi, l’event listener verrà agganciato a tutti, permettendo l’apertura del modale da qualsiasi elemento corrispondente.
  • Nessun container target: L’attributo data-target viene ignorato in modalità custom-listener, poiché il modale ha una posizione fissa.
  • Modale sempre centrato: Il modale appare sempre al centro della viewport, indipendentemente dalla posizione del trigger.
  • Event listener single: Un singolo event listener gestisce tutti i click sul/i elemento/i trigger, non uno per elemento, ottimizzando le prestazioni.
  • No body scroll: Durante l’apertura del modale, lo scroll della pagina viene disabilitato automaticamente per evitare comportamenti indesiderati.
  • Overlay clickable: Cliccando sull’overlay (area scura intorno al modale), il modale si chiude automaticamente.

Best Practices per Custom-Listener

✅ Raccomandazioni

  • Posiziona lo script FAQ dopo l’elemento trigger nel DOM
  • Usa selettori CSS il più specifici possibile per evitare conflitti
  • Testa il comportamento con l’overlay e le combinazioni di tema
  • Considera l’accessibilità dell’elemento trigger (keyboard navigation)
  • Monitora la console per eventuali errori di selettore non trovato
  • Combina con traduzione automatica per massima internazionalizzazione

❌ Evitare

  • Non usare selettori generici che potrebbero selezionare elementi indesiderati
  • Non rimuovere l’elemento trigger dal DOM dopo l’inizializzazione
  • Non modificare il selettore dinamicamente dopo il caricamento dello script
  • Non caricare più istanze della modalità custom-listener con lo stesso trigger

Risoluzione dei Problemi

Checklist di Verifica Generale

  • Verifica che l’attributo de>data-id sia corretto e in minuscolo
  • Controlla la console del browser per eventuali errori
  • Se usi de>data-target, verifica che l’elemento esista
  • Assicurati che le dimensioni specificate siano valide
  • Per traduzione automatica: Verifica il codice lingua (es: “en”, non “english”)
  • Per traduzione automatica: Controlla che Google Translate sia disponibile
  • Per traduzione automatica: Attendi 1-5 secondi per il completamento della traduzione

Checklist per Modalità Custom-Listener

  • Verifica che l’elemento trigger specificato in de>data-faq-trigger esista nel DOM
  • Controlla che il selettore CSS sia corretto e non ambiguo
  • Assicurati che lo script sia caricato DOPO l’elemento trigger nel DOM
  • Se il trigger è un link, verifica che non abbia un comportamento di default che interferisce (href=”#”)
  • Controlla nella console che il selettore sia stato trovato correttamente
  • Verifica che solo la modalità custom-listener sia abilitata (data-mode=”custom-listener”)
  • Non usare contemporaneamente de>data-target e de>data-mode=”custom-listener”

Debug Mode

Il widget include una modalità debug che fornisce informazioni dettagliate nella console del browser. Verifica i log contrassegnati con emoji per il tracciamento degli eventi:

  • 🔍 Ricerca elementi e selezione target
  • 📝 Lettura parametri di configurazione
  • ✅ Conferme di inizializzazione
  • ⚠️ Avvisi e problemi non critici
  • ❌ Errori che richiedono attenzione
  • 🌐 Azioni di traduzione automatica
  • 🔄 Tentativi di retry per la traduzione
  • 🎯 Agganciamento di event listener su trigger (modalità custom-listener)
  • 🚀 Apertura e chiusura del modale (modalità custom-listener)

Problemi Comuni con la Traduzione

Problema: La traduzione non si applica

Soluzione 1: Verifica nella console che Google Translate sia disponibile digitando:

document.querySelector('select.goog-te-combo')

Soluzione 2: Controlla di aver usato il codice lingua corretto (ISO 639-1)

<!-- Corretto -->
<script data-translatetolang="en"></script>

<!-- Sbagliato -->
<script data-translatetolang="english"></script>

Soluzione 3: Attendi qualche secondo in più – il retry intelligente potrebbe aver bisogno di più tempo

Problema: Lingua sbagliata visualizzata

Soluzione: Verifica l’attributo de>data-translatetolang e assicurati che corrisponda al codice della lingua desiderata. I codici sono case-sensitive per alcune lingue (es: zh-CN vs zh-cn).

Problema: Errori nella console

Soluzione: Cerca messaggi con emoji ❌ o ⚠️ nella console. Questi messaggi forniscono dettagli specifici sull’errore e suggerimenti per risolverlo.

Problemi Specifici Custom-Listener

Problema: Il modale non si apre al click

Causa probabile: L’elemento trigger non è stato trovato dal selettore CSS.

Soluzione: Apri la console (F12) e verifica se appare il messaggio di errore ❌. Controlla che:

  • Il selettore CSS è sintatticamente corretto
  • L’elemento esiste nel DOM prima del caricamento dello script
  • Non ci sono typo nel selettore

Problema: Il modale si apre ma il trigger rimane attivo

Soluzione: Se il trigger è un link (tag <a>), aggiungi de>href=”javascript:void(0)” per evitare navigazione:

<a id="nav-faq" href="javascript:void(0)">FAQ</a>

Problema: Stili CSS del trigger spariscono

Causa probabile: Lo scroll è stato disabilitato durante l’apertura del modale.

Soluzione: Questo è il comportamento atteso. Lo scroll si ripristina quando chiudi il modale.

Problema: Custom-Listener agganciato a troppi elementi

Causa probabile: Il selettore CSS è troppo generico.

Soluzione: Usa un selettore più specifico, ad esempio una combinazione di classe e attributo:

<!-- Troppo generico -->
data-faq-trigger="button"

<!-- Migliore -->
data-faq-trigger="button.help-btn"

<!-- Ancora migliore -->
data-faq-trigger="button.help-btn[data-section='faq']"

⚡ Performance e Compatibilità

Metriche di Performance

Metrica Valore Note
Tempo Traduzione 800ms – 5s Dipende dalla velocità di Google Translate
Memory Usage Minimo Nessun memory leak rilevato
Compatibilità Browser 5+ browser Chrome, Firefox, Safari, Edge, Opera
Tempo Apertura Modale Custom-Listener <100ms Agilità estrema nell’apertura del modale

Compatibilità Browser

Browser Versione Minima Status
Google Chrome 90+ ✅ Completamente supportato
Mozilla Firefox 88+ ✅ Completamente supportato
Safari 14+ ✅ Completamente supportato
Microsoft Edge 90+ ✅ Completamente supportato
Opera 76+ ✅ Completamente supportato

Compatibilità Dispositivi

  • ✅ Desktop (Windows, macOS, Linux)
  • ✅ Tablet (iOS, Android)
  • ✅ Mobile (iOS, Android)
  • ✅ Design Responsive su tutti i dispositivi
  • ✅ Touch-friendly per modalità custom-listener

Sicurezza

Il widget PROMIUM FAQ è progettato con la sicurezza come priorità:

  • ✅ Nessuna valutazione dinamica del codice (no eval())
  • ✅ Sanitizzazione completa degli input utente
  • ✅ Error handling robusto che previene crash
  • ✅ CORS-compliant per comunicazione cross-domain sicura
  • ✅ XSS-safe con protezione contro injection attacks
  • ✅ Content Security Policy compatibile
  • ✅ Validazione rigorosa dei selettori CSS in modalità custom-listener
  • ✅ Nessun accesso a proprietà DOM sensibili

Supporto Tecnico

Il team di Promium AI è a tua disposizione per qualsiasi domanda o problema tecnico relativo all’implementazione del widget FAQ, della funzionalità di traduzione automatica e della modalità custom-listener.

Contatti

  • Email: assistenza@promiumai.com
  • Telefono: +39 379 158 2010
  • Website: https://promiumai.com