Skip to content

Commit 8dc9010

Browse files
trailhead-loristrailhead-loris
authored
Aggiornato
1 parent 2dd07ce commit 8dc9010

File tree

1 file changed

+114
-29
lines changed

1 file changed

+114
-29
lines changed

‎index.html‎

Lines changed: 114 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,140 @@
1-
<script type='text/javascript'>
1+
<!DOCTYPE html>
2+
<html lang="it">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Demo Salesforce - Dynamic Input Test</title>
7+
<style>
8+
body { font-family: 'Segoe UI', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f4f6f9; margin: 0; }
9+
.box { background: #fff; padding: 30px; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: left; width: 380px; }
10+
h1 { margin: 0 0 25px; font-size: 26px; text-align: center; color: #1a1a1a; }
11+
12+
/* Stile per le righe del form */
13+
.form-row { margin-bottom: 15px; }
14+
.form-row label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 5px; }
15+
16+
/* Stile per input e select uniformati */
17+
select, input[type="text"] {
18+
width: 100%;
19+
padding: 8px 10px;
20+
border-radius: 4px;
21+
border: 1px solid #ccc;
22+
font-size: 14px;
23+
box-sizing: border-box; /* Assicura che il padding non sballi la larghezza */
24+
background-color: #fff;
25+
}
26+
27+
input[type="text"]:focus, select:focus { border-color: #0070d2; outline: none; box-shadow: 0 0 3px rgba(0,112,210, 0.3); }
28+
29+
.btn-start { display: block; width: 100%; padding: 12px; background-color: #0070d2; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; margin-top: 25px; transition: background 0.3s; }
30+
.btn-start:hover { background-color: #005fb2; }
31+
.btn-start:disabled { background-color: #ccc; cursor: not-allowed; }
32+
33+
.status { font-size: 13px; text-align: center; color: #0969da; margin-top: 15px; font-weight: 600; min-height: 20px;}
34+
</style>
35+
</head>
36+
<body>
37+
38+
<div class="box">
39+
<h1>Test Agentforce</h1>
40+
41+
<div class="form-row" style="background-color: #fafffa; border: 1px solid #cce5cc; padding: 10px; border-radius: 6px;">
42+
<label for="language-picker">Lingua Chat</label>
43+
<select id="language-picker">
44+
<option value="it">Italiano (IT)</option>
45+
<option value="en_US">English (US)</option>
46+
<option value="fr">Français (FR)</option>
47+
<option value="es">Español (ES)</option>
48+
</select>
49+
</div>
50+
51+
<div class="form-row">
52+
<label for="input-fullname">Nome Completo (fullname)</label>
53+
<input type="text" id="input-fullname" value="Mario Rossi" placeholder="Es. Mario Rossi">
54+
</div>
55+
56+
<div class="form-row">
57+
<label for="input-type">Tipo Utente (userType)</label>
58+
<input type="text" id="input-type" value="consultant" placeholder="Es. consultant">
59+
</div>
60+
61+
<div class="form-row">
62+
<label for="input-id">ID Utente (userId)</label>
63+
<input type="text" id="input-id" value="12345" placeholder="Es. 12345">
64+
</div>
65+
66+
<div class="form-row">
67+
<label for="input-nationality">Nazionalità (nationality)</label>
68+
<input type="text" id="input-nationality" value="FR" placeholder="Es. IT, FR, ES">
69+
</div>
70+
71+
<button id="start-btn" class="btn-start" onclick="startChatSession()">Inizializza Chat</button>
72+
73+
<div id="status-msg" class="status">Configura i dati e clicca Inizializza</div>
74+
75+
<p style="text-align:center; color:#999; font-size:11px; margin-top:25px;">
76+
Chogan Demo Environment
77+
</p>
78+
</div>
79+
80+
<script type='text/javascript'>
281

382
function startChatSession() {
4-
// Disabilita il bottone
83+
// Disabilita il bottone per evitare doppi click e modifiche durante il caricamento
584
const btn = document.getElementById('start-btn');
685
btn.disabled = true;
786
btn.innerText = "Caricamento...";
887

9-
// 1. Recupera la lingua
88+
// Disabilita gli input
89+
document.getElementById('language-picker').disabled = true;
90+
document.getElementById('input-fullname').disabled = true;
91+
document.getElementById('input-type').disabled = true;
92+
document.getElementById('input-id').disabled = true;
93+
document.getElementById('input-nationality').disabled = true;
94+
95+
// Recupera la lingua scelta dalla Select
1096
const selectedLang = document.getElementById('language-picker').value;
11-
12-
// 2. Recupera i dati dagli input form
13-
const userDetails = {
14-
fullname: document.getElementById('inp-fullname').value,
15-
userType: document.getElementById('inp-type').value,
16-
userId: document.getElementById('inp-id').value,
17-
nationality: document.getElementById('inp-nationality').value
18-
};
19-
20-
console.log("--> LINGUA:", selectedLang);
21-
console.log("--> DATI UTENTE:", userDetails);
22-
23-
initEmbeddedMessaging(selectedLang, userDetails);
97+
console.log("--> LINGUA SELEZIONATA:", selectedLang);
98+
99+
initEmbeddedMessaging(selectedLang);
24100
}
25101

26-
function initEmbeddedMessaging(langCode, userData) {
102+
function initEmbeddedMessaging(langCode) {
27103
console.log("--> INIT SALESFORCE START <--");
28104

29105
try {
30106
// 1. IMPOSTAZIONI DEL CANALE (UI del Widget)
31-
// Usa SOLO embeddedservice_bootstrap, non embedded_svc
32107
embeddedservice_bootstrap.settings.language = langCode;
33-
34-
// Disabilita input utente se si parla col bot (opzionale)
35108
embeddedservice_bootstrap.settings.enableUserInputForConversationWithBot = false;
36109

37-
// 2. GESTIONE EVENTO PRE-CHAT
110+
// 2. GESTIONE EVENTO PRE-CHAT (Per Agentforce)
38111
window.addEventListener("onEmbeddedMessagingReady", () => {
39112
console.log(">>> EVENTO: Messaging Ready. Invio parametri...");
40113

41114
try {
42-
// Costruiamo l'oggetto con i dati presi dagli input
115+
// Recuperiamo i valori freschi dagli input
116+
const fName = document.getElementById('input-fullname').value;
117+
const uType = document.getElementById('input-type').value;
118+
const uId = document.getElementById('input-id').value;
119+
const uNat = document.getElementById('input-nationality').value;
120+
121+
// Costruiamo l'oggetto con i dati utente presi dal form
43122
const hiddenFields = {
44-
"fullname": userData.fullname,
45-
"userType": userData.userType,
46-
"nationality": userData.nationality,
47-
"userId": userData.userId,
123+
"fullname": fName,
124+
"userType": uType,
125+
"nationality": uNat,
126+
"userId": uId,
127+
// Passiamo la lingua dinamicamente (non hardcodata a en_US)
48128
"Language": langCode
49129
};
50130

51131
embeddedservice_bootstrap.prechatAPI.setHiddenPrechatFields(hiddenFields);
52132

53133
console.log(">>> Parametri Hidden inviati:", hiddenFields);
54134

55-
document.getElementById('status-msg').innerText = "Chat Pronta in: " + langCode;
135+
document.getElementById('status-msg').innerText = "Chat Pronta (" + langCode + ")";
56136
document.getElementById('status-msg').style.color = "green";
57-
document.getElementById('start-btn').style.display = 'none';
137+
document.getElementById('start-btn').style.display = 'none'; // Nascondi bottone
58138

59139
} catch (e) {
60140
console.error("Errore hidden fields:", e);
@@ -75,7 +155,12 @@
75155

76156
} catch (err) {
77157
console.error('Errore critico durante Init:', err);
78-
document.getElementById('status-msg').innerText = "Errore Init: " + err.message;
158+
document.getElementById('status-msg').innerText = "Errore Init";
79159
}
80160
};
81161
</script>
162+
163+
<script type='text/javascript' src='https://chogangroup--devai2.sandbox.my.site.com/ESWaichogangroupspacom1764335835157/assets/js/bootstrap.min.js'></script>
164+
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)