Skip to content

Commit 54a3a3c

Browse files
trailhead-loristrailhead-loris
authored
Parametri diventano di input
1 parent 28f605c commit 54a3a3c

File tree

1 file changed

+63
-48
lines changed

1 file changed

+63
-48
lines changed

‎index.html‎

Lines changed: 63 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -8,102 +8,124 @@
88
body { font-family: 'Segoe UI', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f4f6f9; margin: 0; }
99
.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; }
1010
h1 { margin: 0 0 25px; font-size: 26px; text-align: center; color: #1a1a1a; }
11-
.info-row { margin-bottom: 12px; font-size: 15px; color: #555; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
12-
.info-row strong { color: #333; }
1311

14-
/* Stile per il selettore e bottone */
15-
select { padding: 5px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px; }
16-
.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: 20px; transition: background 0.3s; }
12+
.input-group { margin-bottom: 15px; }
13+
.input-group label { display: block; font-size: 13px; color: #555; margin-bottom: 5px; font-weight: 600; }
14+
15+
/* Stile uniforme per input e select */
16+
select, input[type="text"] {
17+
width: 100%;
18+
padding: 8px 10px;
19+
border-radius: 4px;
20+
border: 1px solid #ccc;
21+
font-size: 14px;
22+
box-sizing: border-box; /* Assicura che il padding non sballi la larghezza */
23+
font-family: inherit;
24+
}
25+
26+
.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; }
1727
.btn-start:hover { background-color: #005fb2; }
1828
.btn-start:disabled { background-color: #ccc; cursor: not-allowed; }
1929

2030
.status { font-size: 13px; text-align: center; color: #0969da; margin-top: 15px; font-weight: 600; min-height: 20px;}
31+
32+
.section-title { font-size: 12px; text-transform: uppercase; color: #999; margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
2133
</style>
2234
</head>
2335
<body>
2436

2537
<div class="box">
2638
<h1>Test Agentforce</h1>
2739

28-
<div class="info-row" style="background-color: #fafffa; border: 1px solid #cce5cc; padding: 10px; border-radius: 6px;">
29-
<strong>Lingua Chat:</strong>
40+
<div class="input-group" style="background-color: #fafffa; border: 1px solid #cce5cc; padding: 10px; border-radius: 6px;">
41+
<label for="language-picker">Lingua Chat</label>
3042
<select id="language-picker">
3143
<option value="it">Italiano (IT)</option>
3244
<option value="en_US">English (US)</option>
3345
<option value="es">Español (ES)</option>
3446
<option value="fr">Français (FR)</option>
35-
<option value="bg_BG">Bulgarian (bg_BG) </option>
36-
<option value="en_BG"> ENG Bulgarian (en_BG) </option>
3747
</select>
3848
</div>
3949

40-
<div class="info-row"><strong>Nome:</strong> <span id="disp-name">...</span></div>
41-
<div class="info-row"><strong>Tipo Utente:</strong> <span id="disp-type">...</span></div>
42-
<div class="info-row"><strong>ID Utente:</strong> <span id="disp-id">...</span></div>
43-
<div class="info-row"><strong>Nazionalità:</strong> <span id="disp-nationality">...</span></div>
50+
<div class="section-title">Dati Utente</div>
51+
52+
<div class="input-group">
53+
<label for="inp-fullname">Nome Completo (fullname)</label>
54+
<input type="text" id="inp-fullname" value="Mario Rossi" placeholder="Es. Mario Rossi">
55+
</div>
56+
57+
<div class="input-group">
58+
<label for="inp-type">Tipo Utente (userType)</label>
59+
<input type="text" id="inp-type" value="consultant" placeholder="Es. consultant">
60+
</div>
61+
62+
<div class="input-group">
63+
<label for="inp-id">ID Utente (userId)</label>
64+
<input type="text" id="inp-id" value="12345" placeholder="Es. 12345">
65+
</div>
66+
67+
<div class="input-group">
68+
<label for="inp-nationality">Nazionalità (nationality)</label>
69+
<input type="text" id="inp-nationality" value="IT" placeholder="Es. IT">
70+
</div>
4471

4572
<button id="start-btn" class="btn-start" onclick="startChatSession()">Inizializza Chat</button>
4673

47-
<div id="status-msg" class="status">Seleziona lingua e clicca Inizializza</div>
74+
<div id="status-msg" class="status">Configura e clicca Inizializza</div>
4875

4976
<p style="text-align:center; color:#999; font-size:11px; margin-top:25px;">
5077
Chogan Demo Environment
5178
</p>
5279
</div>
5380

5481
<script type='text/javascript'>
55-
// Dati utente simulati
56-
const userData = {
57-
fullname: "Mario Rossi",
58-
userType: "consultant",
59-
nationality: "FR",
60-
userId: "12345"
61-
};
62-
63-
// Popola UI
64-
document.getElementById('disp-name').innerText = userData.fullname;
65-
document.getElementById('disp-type').innerText = userData.userType;
66-
document.getElementById('disp-id').innerText = userData.userId;
67-
document.getElementById('disp-nationality').innerText = userData.nationality;
68-
82+
6983
function startChatSession() {
70-
// Disabilita il bottone per evitare doppi click
84+
// Disabilita il bottone
7185
const btn = document.getElementById('start-btn');
7286
btn.disabled = true;
7387
btn.innerText = "Caricamento...";
7488

75-
// Recupera la lingua scelta dalla Select
89+
// 1. Recupera la lingua
7690
const selectedLang = document.getElementById('language-picker').value;
77-
console.log("--> LINGUA SELEZIONATA:", selectedLang);
78-
79-
initEmbeddedMessaging(selectedLang);
91+
92+
// 2. Recupera i dati dagli input form
93+
const userDetails = {
94+
fullname: document.getElementById('inp-fullname').value,
95+
userType: document.getElementById('inp-type').value,
96+
userId: document.getElementById('inp-id').value,
97+
nationality: document.getElementById('inp-nationality').value
98+
};
99+
100+
console.log("--> LINGUA:", selectedLang);
101+
console.log("--> DATI UTENTE:", userDetails);
102+
103+
initEmbeddedMessaging(selectedLang, userDetails);
80104
}
81105

82-
function initEmbeddedMessaging(langCode) {
106+
function initEmbeddedMessaging(langCode, userData) {
83107
console.log("--> INIT SALESFORCE START <--");
84108

85109
try {
86110
// 1. IMPOSTAZIONI DEL CANALE (UI del Widget)
87-
// Questo imposta la lingua dei pulsanti standard ("Invia", "Chiudi", ecc.)
88111
embeddedservice_bootstrap.settings.language = langCode;
89112
embedded_svc.settings.loadingText = "..."
90113

91114
embeddedservice_bootstrap.settings.enableUserInputForConversationWithBot = false;
92115

93-
// 2. GESTIONE EVENTO PRE-CHAT (Per Agentforce)
116+
// 2. GESTIONE EVENTO PRE-CHAT
94117
window.addEventListener("onEmbeddedMessagingReady", () => {
95118
console.log(">>> EVENTO: Messaging Ready. Invio parametri...");
96119

97120
try {
98-
// Costruiamo l'oggetto con i dati utente + LA LINGUA
121+
// Costruiamo l'oggetto con i dati presi dagli input
99122
const hiddenFields = {
100123
"fullname": userData.fullname,
101124
"userType": userData.userType,
102125
"nationality": userData.nationality,
103126
"userId": userData.userId,
104-
// ECCO IL PUNTO CRUCIALE DALLA DOCUMENTAZIONE:
105-
// Passiamo la lingua come parametro nascosto per il Flow Omni-Channel
106-
"Language": 'en_US'
127+
// Passiamo la lingua selezionata dinamicamente
128+
"Language": langCode
107129
};
108130

109131
embeddedservice_bootstrap.prechatAPI.setHiddenPrechatFields(hiddenFields);
@@ -112,7 +134,7 @@ <h1>Test Agentforce</h1>
112134

113135
document.getElementById('status-msg').innerText = "Chat Pronta in: " + langCode;
114136
document.getElementById('status-msg').style.color = "green";
115-
document.getElementById('start-btn').style.display = 'none'; // Nascondi bottone
137+
document.getElementById('start-btn').style.display = 'none';
116138

117139
} catch (e) {
118140
console.error("Errore hidden fields:", e);
@@ -141,11 +163,4 @@ <h1>Test Agentforce</h1>
141163
<script type='text/javascript' src='https://chogangroup--devai2.sandbox.my.site.com/ESWaichogangroupspacom1764335835157/assets/js/bootstrap.min.js'></script>
142164

143165
</body>
144-
145166
</html>
146-
147-
148-
149-
150-
151-

0 commit comments

Comments
 (0)