Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Configurare le funzionalità di chiamata in-app, web e video e di condivisione dello schermo
<a name="inapp-calling"></a>

Le funzionalità Amazon Connect in-app, web e videochiamate consentono ai tuoi clienti di contattarti senza mai uscire dalla tua applicazione web o mobile. È possibile utilizzare queste funzionalità per passare informazioni contestuali a Amazon Connect. Ciò consente di personalizzare l'esperienza del cliente in base ad attributi come il suo profilo o altre informazioni, come le azioni eseguite in precedenza all'interno dell'app.

## Informazioni importanti
<a name="inapp-calling-important"></a>
+ Durante una videochiamata o una sessione di condivisione dello schermo, gli agenti possono vedere il video o lo schermo condiviso dal cliente anche quando il cliente è in attesa. È responsabilità del cliente gestire le PII di conseguenza. Se desideri modificare questo comportamento, puoi creare un CCP e un widget di comunicazione personalizzati. Per ulteriori informazioni, consulta [Integrare le chiamate in-app, web e video e la condivisione dello schermo in modo nativo in un’applicazione](config-com-widget2.md).

## Widget di comunicazione: configurare chat, voce e video in un unico posto
<a name="one-page"></a>

Per configurare le chiamate in-app, web e video, devi utilizzare la pagina dei **widget di comunicazione**. Supporta chat, voce, video e condivisione dello schermo. L'immagine seguente mostra la sezione **Opzioni di comunicazione** della pagina quando è configurata per tutte queste opzioni. 

![\[La sezione Opzioni di comunicazione della pagina Crea un widget di comunicazione.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/comm-widget-all.png)


## Chiamate multiutente in-app, web e video
<a name="multi-user"></a>

Puoi aggiungere fino a quattro utenti aggiuntivi a una chiamata web, in-app o video in corso o programmata, per un totale di sei partecipanti: l’agente, il primo utente e altri quattro partecipanti (utenti o agenti).

Ad esempio, per agevolare la conclusione di una transazione ipotecaria, puoi avere una chiamata con l’agente e il cliente, il coniuge del cliente, un traduttore e persino un supervisore (cioè un altro agente) per aiutare a risolvere rapidamente eventuali problemi.

Per scoprire come abilitare le chiamate multiutente via web, in-app e video, consulta [Abilitare le chiamate multiutente in-app, web e video](enable-multiuser-inapp.md).

## Come configurare le chiamate in-app, web e video e la condivisione dello schermo
<a name="inapp-options"></a>

Esistono due modi per incorporare le chiamate Amazon Connect in-app, web e videochiamate e la condivisione dello schermo sul tuo sito Web o applicazione mobile: 
+ Opzione 1: [configura un widget di out-of-the-box comunicazione](config-com-widget1.md). Puoi utilizzare lo strumento di creazione dell'interfaccia utente per personalizzare il carattere e i colori e proteggere il widget in modo che possa essere avviato solo dal tuo sito Web. 
+ Opzione 2: [integrare le chiamate in-app, web e video in modo nativo nella tua applicazione per dispositivi mobili](config-com-widget2.md). Scegli questa opzione per creare un widget di comunicazione partendo da zero e integrarlo con la tua applicazione per dispositivi mobili o il tuo sito web. Usa il client Amazon Connect APIs and Amazon Chime SDK APIs per integrarti in modo nativo nella tua applicazione mobile o nel tuo sito web.

**Nota**  
Se disponi di desktop per agenti personalizzati, non è necessario apportare modifiche alle chiamate in-app e web di Amazon Connect. Tuttavia, è necessario [integrare le funzionalità di videochiamata e condivisione dello schermo](integrate-video-calling-for-agents.md).

# Configurare un widget out-of-the-box di comunicazione in Amazon Connect
<a name="config-com-widget1"></a>

[Utilizza questa opzione per creare widget di comunicazione per browser desktop e per dispositivi mobili.](connect-supported-browsers.md#browsers-inapp) Al termine di questa procedura, Amazon Connect genera uno snippet di codice HTML personalizzato da copiare nel codice sorgente del tuo web.

1. Accedi al sito web di Amazon Connect amministrazione utilizzando un account amministratore o un account utente con **canali e flussi**, **Widget di comunicazione: crea** l'autorizzazione nel relativo profilo di sicurezza.

1. Nel Amazon Connect menu di navigazione a sinistra, scegli **Canali**, **Widget di comunicazione**. 

1. La procedura guidata accompagna l'utente nei tre passaggi successivi. 

## Passaggio 1: selezionare i canali di comunicazione
<a name="widgetdetails"></a>

1. Nella pagina **Widget di comunicazione**, inserisci un **nome** e una **descrizione** per il widget di comunicazione. 
**Nota**  
Il nome deve essere univoco per ogni widget di comunicazione creato in un'istanza Amazon Connect.

1. Nella sezione **Opzioni di comunicazione**, scegli in che modo i clienti possono interagire con il widget. L’immagine seguente mostra le opzioni per consentire ai clienti di effettuare chiamate web e video e la condivisione dello schermo.   
![\[Pagina del widget di comunicazione configurata per chiamate web e video e per la condivisione dello schermo.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/comm-widget-page-call.png)

1. Nella sezione **Chiamate Web**, scegli se abilitare le funzionalità video e di condivisione dello schermo per i clienti. L’immagine precedente mostra le opzioni che consentono ai clienti di vedere il video degli agenti, di attivare il proprio video e di consentire agli agenti e ai clienti di condividere i propri schermi. Per informazioni sull’impostazione di restrizioni per la condivisione dello schermo, consulta [Abilitare la limitazione degli URL per la condivisione dello schermo](screen-sharing-url-restriction.md).

1. Seleziona **Salva e continua**.

## Passaggio 2: personalizzare il widget
<a name="customizewidget"></a>

Durante la scelta dei colori, l'anteprima della chat si aggiorna automaticamente in modo che sia possibile vedere come apparirà il widget.

![\[L'anteprima del widget di comunicazione.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/netra-call-preview.png)


**Definisci gli stili dei pulsanti di accesso del widget**

1. Scegli i colori per lo sfondo del pulsante inserendo valori esadecimali ([codici colore HTML](https://htmlcolorcodes.com/)).

1. Scegli **Bianco** o **Nero** per il colore dell'icona. Il colore dell'icona non può essere personalizzato.

**Personalizza i nomi e gli stili di visualizzazione**

1. Indica i valori per il messaggio e il colore dell'intestazione e il colore di sfondo del widget. 

1. **URL del logo**: inserisci un URL che punti al banner con il logo da un bucket Amazon S3 o da un'altra origine online.
**Nota**  
L'anteprima del widget di comunicazione nella pagina di personalizzazione non mostrerà il logo se proviene da un'origine online diversa da un bucket Amazon S3. Tuttavia, il logo verrà visualizzato quando il widget di comunicazione personalizzato verrà implementato nella tua pagina.

   Il banner deve essere in formato .svg, .jpg o .png. L'immagine può misurare fino a 280 px (larghezza) per 60 px (altezza). Qualsiasi immagine più grande di tali dimensioni verrà dimensionata per adattarsi allo spazio dei componenti del logo di 280x60px.

   1. Per istruzioni su come caricare un file come il banner con il logo su S3, consulta [Caricamento degli oggetti](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) nella *Guida dell'utente di Amazon Simple Storage Service*.

   1. Assicurati che le autorizzazioni dell'immagine siano impostate correttamente in modo che il widget di comunicazione disponga delle autorizzazioni per accedervi. Per informazioni su come rendere un oggetto S3 accessibile al pubblico, consulta [Passaggio 2: aggiunta di una policy del bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) nell'argomento *Impostazione delle autorizzazioni per l'accesso al sito web*.

## Passaggio 3: aggiungere il dominio per il widget
<a name="widgetdomain"></a>

Questo passaggio consente di proteggere il widget di comunicazione in modo che possa essere avviato solo dal tuo sito web.

1. Inserisci i domini dei siti web in cui desideri posizionare il widget di comunicazione. Il widget di comunicazione viene caricato solo sui siti web selezionati in questo passaggio. 

   Scegli **Aggiungi un dominio** per aggiungere fino a 50 domini.  
![\[L'opzione Aggiungi un dominio.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/chatwidget-add-domain.png)
**Importante**  
Ricontrolla che il tuo sito web URLs sia valido e non contenga errori. Includi l'URL completo che inizia con https://.
Si consiglia di utilizzare https:// per i siti web e le applicazioni di produzione.

1. Per un'esperienza di configurazione più rapida scegli **No, salterò** alla voce **Aggiungi sicurezza per le tue richieste di widget di comunicazione**.

   Ti consigliamo di scegliere **Sì** per verificare che l'utente sia autenticato. Per ulteriori informazioni, consulta [Personalizzare l’esperienza cliente per chiamate in-app, web e video in Amazon Connect](optional-widget-steps.md). 

1. Seleziona **Salva e continua**.

   Riuscito\$1 Il widget è stato creato. Copia il codice generato e incollalo in ogni pagina del tuo sito web in cui desideri che appaia il widget di comunicazione.

## Consenti agli agenti di effettuare chiamate in-app, web e video e la condivisione dello schermo
<a name="agent-cx-cw"></a>

Per consentire agli agenti di utilizzare le chiamate video e la condivisione dello schermo, assegna le autorizzazioni **Pannello di controllo dei contatti (CCP)**, **Video chiamate - Accesso** al loro profilo di sicurezza.

L'area di lavoro degli Amazon Connect agenti supporta chiamate Amazon Connect in-app, web e videochiamate e la condivisione dello schermo. Puoi utilizzare la stessa configurazione, instradamento, analisi e applicazione per agenti delle chiamate telefoniche e delle chat. Per iniziare, l’unico passaggio necessario è l’abilitazione dei profili di sicurezza dell’agente con le autorizzazioni per effettuare chiamate video e la condivisione dello schermo.

Per i desktop personalizzati degli agenti, non sono necessarie modifiche per le chiamate Amazon Connect in-app e web. Abilita i profili di sicurezza dell’agente con le autorizzazioni per effettuare chiamate video e condivisione dello schermo, e attieniti alla guida riportata di seguito su come integrare le videochiamate nel desktop dell’agente.

## In che modo un dispositivo client avvia una chiamata in-app o web
<a name="diagram-option1"></a>

Il diagramma seguente mostra la sequenza di eventi necessari per avviare una chiamata in-app o web da un dispositivo client (applicazione per dispositivi mobili o browser).

![\[Un diagramma concettuale che mostra in che modo un dispositivo client avvia una chiamata.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (Facoltativo) Puoi passare gli attributi acquisiti nel sito web e convalidarli con il token web JSON (JWT). 

1. Il cliente fa clic sul widget di comunicazione nel tuo sito web o nell'app per dispositivi mobili. 

1. Il widget di comunicazione avvia la chiamata Web Amazon Connect passando gli attributi contenuti nel JWT. 

1. Il contatto raggiunge il flusso, viene instradato e messo in coda. 

1. L'agente accetta il contatto.

1. (Facoltativo) Se il video è abilitato per il cliente e l'agente, questi possono avviare il video.

## Ulteriori informazioni
<a name="cw-more-resources"></a>

Per ulteriori informazioni sui requisiti per le funzionalità di chiamata in-app, web e video, consulta i seguenti argomenti:
+ [Requisiti della workstation degli agenti per chiamate con app, web e video in Amazon Connect](videocalling-networking-requirements.md)
+ [Browser e sistemi operativi mobili supportati per funzionalità di chiamata in-app, web e video](connect-supported-browsers.md#browsers-inapp) 

# Integrare le chiamate in-app, web e video e la condivisione dello schermo in modo nativo in un’applicazione
<a name="config-com-widget2"></a>

Come integrare le chiamate in-app, web e video e la condivisione dello schermo di Amazon Connect in un’applicazione

1. Usa l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API Amazon Connect per creare il contatto.

1. Utilizza quindi i dettagli restituiti dalla chiamata API per partecipare alla chiamata utilizzando la libreria Amazon Chime client per [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) o [JavaScript](https://github.com/aws/amazon-chime-sdk-js). 

Per ulteriori informazioni sulla creazione di partecipanti aggiuntivi, consulta [Abilitare le chiamate multiutente in-app, web e video](enable-multiuser-inapp.md). 

[Vedi il seguente repository Github per applicazioni di esempio: -calling-examples. amazon-connect-in-app](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples) 

**Topics**
+ [In che modo un dispositivo client avvia una chiamata in-app o web](#diagram-option2)
+ [Nozioni di base](#diagram-option2-gs)
+ [Passaggi facoltativi](#optional-steps)

## In che modo un dispositivo client avvia una chiamata in-app o web
<a name="diagram-option2"></a>

Il diagramma seguente mostra la sequenza di eventi necessari per avviare una chiamata in-app o web da un dispositivo client (applicazione per dispositivi mobili o browser).

![\[Un diagramma concettuale che mostra in che modo un dispositivo client avvia una chiamata.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/netra-gs-diagram.png)


1. Il cliente utilizza l'applicazione client (sito web o applicazione) per avviare una chiamata in-app o web.

1. L'applicazione client (sito Web o applicazione mobile) o il server Web utilizza l' Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API per avviare il contatto a cui passa qualsiasi attributo o contesto. Amazon Connect

1. L'applicazione client si unisce alla chiamata utilizzando i dettagli restituiti dal [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)passaggio 2.

1. (Facoltativo) Il client utilizza l'[CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API per ricevere un `ConnectionToken` messaggio utilizzato per inviare DTMF tramite l'API. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

1. Il contatto raggiunge il flusso, viene instradato in base al flusso e messo in coda.

1. L'agente accetta il contatto.

1. (Facoltativo) Se il video è abilitato per il cliente e l'agente, questi possono avviare il video.

1. (Facoltativo, non mostrato nel diagramma) È possibile aggiungere altri partecipanti utilizzando e. [CreateParticipant[CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html) APIs 

## Nozioni di base
<a name="diagram-option2-gs"></a>

Di seguito sono riportati i passaggi di alto livello per iniziare:

1. Utilizza l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API per creare il contatto. L’API restituisce i dettagli necessari per il client dell’SDK di Amazon Chime per partecipare alla chiamata.

1. Crea un'istanza dell'oggetto `MeetingSessionConfiguration` client Amazon Chime SDK utilizzando le configurazioni restituite da. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

1. Crea un’istanza di `DefaultMeetingSession` del client dell’SDK di Amazon Chime con `MeetingSessionConfiguration`, che è stata creata nel passaggio 2 per creare una sessione di riunione con il cliente. 
   + iOS

     ```
     let logger = ConsoleLogger(name: "logger") 
     let meetingSession = DefaultMeetingSession(
         configuration: meetingSessionConfig, 
         logger: logger
     )
     ```
   + Android

     ```
     val logger = ConsoleLogger()
     val meetingSession = DefaultMeetingSession(
         configuration = meetingSessionConfig,
         logger = logger,
         context = applicationContext
     )
     ```
   + JavaScript

     ```
     const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
     const deviceController = new DefaultDeviceController(logger);
     const configuration = new MeetingSessionConfiguration(
         meetingResponse, 
         attendeeResponse
     );
     const meetingSession = new DefaultMeetingSession(
         configuration, 
         logger, 
         deviceController
     );
     ```

1. Usa il metodo `meetingSession.audioVideo.start()` per partecipare alla chiamata con il contatto WebRTC con l'audio.
   + iOS/Android

     ```
     meetingSession.audioVideo.start()
     ```
   + JavaScript

     ```
     await meetingSession.audioVideo.start();
     ```

1. Usa il metodo `meetingSession.audioVideo.stop()` per riagganciare la chiamata con il contatto WebRTC.
   + iOS/Android

     ```
     meetingSession.audioVideo.stop()
     ```
   + JavaScript

     ```
     meetingSession.audioVideo.stop();
     ```

## Passaggi facoltativi
<a name="optional-steps"></a>

Per ulteriori operazioni e una documentazione completa sulle API, consulta le guide generali sulle API specifiche della piattaforma:
+ **iOS**: [panoramica delle API](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [panoramica delle API](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**[: Panoramica delle API](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### Inviare toni DTMF
<a name="send-dtmf-tones"></a>

Per inviare DTMF alla chiamata, APIs sono necessari due Amazon Connect Participant Service: e rispettivamente. [CreateParticipantConnection[SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)

**Nota**  
`contentType`perché l'API deve essere. SendMessage `audio/dtmf`

1. [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)Invoca per recuperare`ConnectionToken`. (`ParticipantToken`è necessario per chiamare questa API. Puoi trovarlo nella [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)risposta.)

1. Con`ConnectionToken`, chiama [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)per l'invio di cifre DTMF.

### Selezionare i dispositivi audio
<a name="select-audio-devices"></a>

Per selezionare il input/output dispositivo audio, puoi utilizzare i metodi del client Amazon Chime SDK per Android e iOS o le funzionalità iOS native [per iOS](https://developer.apple.com/documentation/avkit/avroutepickerview).

**iOS/Android**

```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```

**JavaScript**

```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```

### Disattivare e riattivare l’audio
<a name="mute-unmute-audio"></a>

Per disattivare e riattivare l'audio, usa `meetingSession.audioVideo.realtimeLocalMute()` e `meetingSession.audioVideo.realtimeLocalUnmute()`.

**iOS/Android**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### Avviare il video dell’utente
<a name="start-self-video"></a>

Per avviare un video di te stesso o te stessa, utilizza `meetingSession.audioVideo.startLocalVideo()`. Consulta le guide alle API della libreria client per ulteriori informazioni su come enumerare e scegliere dispositivi specifici.

**iOS/Android**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### Interrompere il video dell’utente
<a name="stop-self-video"></a>

Per interrompere la riproduzione del video di te stesso o te stessa, utilizza `meetingSession.audioVideo.stopLocalVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### Abilitare il video dell’agente
<a name="enable-agent-video"></a>

Per consentire la ricezione e il caricamento di video dell’agente all’interno dell’applicazione, utilizza `meetingSession.audioVideo.startRemoteVideo()`. Dovrai inoltre implementare gli osservatori di riquadri video e associare i riquadri video alle visualizzazioni.

**iOS/Android**

```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```

**JavaScript**

```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```

Consulta le guide agli SDK specifiche della piattaforma per i dettagli completi sull’implementazione dei riquadri video.

### Disabilitare il video dell’agente
<a name="disable-agent-video"></a>

Per interrompere la ricezione e il caricamento di video dell’agente all’interno dell’applicazione, utilizza `meetingSession.audioVideo.stopRemoteVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### Utilizzare i messaggi di dati
<a name="use-data-messages"></a>

Puoi utilizzare [messaggi di dati](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) se devi inviare qualsiasi stato dal lato agente all’utente finale. Ad esempio, quando i clienti sono in attesa, puoi inviare un messaggio di dati all'applicazione del cliente per visualizzare un messaggio per informarli che sono in attesa e che la video/screen condivisione è ancora in corso di invio, oppure puoi disattivare la condivisione. video/screen 

**iOS/Android**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### Ascoltare gli eventi di arresto
<a name="listen-for-stop-events"></a>

Puoi ascoltare gli eventi quando la partecipazione di un contatto termina tramite l’osservatore `audioVideoDidStop`. I codici di stato specifici possono variare in base alla piattaforma.

#### Limite di capacità raggiunto per una chiamata
<a name="call-reaches-capacity"></a>

Quando più di sei persone tentano di partecipare alla chiamata, i partecipanti aggiuntivi riceveranno il seguente messaggio di errore e non potranno partecipare finché qualche persona non avrà abbandonato la chiamata.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` o `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` o `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` o `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Partecipante rimosso da una chiamata
<a name="participant-removed-from-call"></a>

Quando un partecipante viene rimosso dalla chiamata dall’agente ma il contatto continua per gli altri partecipanti, il partecipante rimosso riceverà il seguente codice di stato. Tieni presente che se la rimozione del partecipante comporta la fine del contatto, il partecipante riceverà questo stato o lo stato di fine contatto.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` o `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` o `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` o `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Termine di un contatto
<a name="contact-ends"></a>

Quando il contatto effettivo termina completamente per tutti i partecipanti, questi riceveranno il seguente codice di stato.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# Abilitare le chiamate multiutente in-app, web e video
<a name="enable-multiuser-inapp"></a>

Amazon Connect supporta l'aggiunta di altri utenti per partecipare alla chiamata in-app, web e videochiamata in una chiamata esistente. Puoi aggiungere fino a quattro utenti aggiuntivi a una chiamata web, in-app o video in corso o programmata, per un totale di sei partecipanti: l’agente, il primo utente e altri quattro partecipanti (utenti o agenti).

## Come aggiungere partecipanti a una chiamata multiutente
<a name="how-to-add-participants"></a>

1. Per abilitare le chiamate multiutente, è necessario abilitare il [monitoraggio avanzato dei contatti multipartitici dalla console](monitor-conversations.md). Amazon Connect 

1. Al termine, puoi sfruttare l' Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API esistente per creare un contatto e indirizzarlo a un agente.

1. Per aggiungere un altro partecipante, crea innanzitutto un partecipante che passi `ContactId` dalla risposta [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API all'API. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html) [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)non avrà successo finché il chiamante originale non si sarà connesso all'agente. Le funzionalità di condivisione del video e dello schermo per il partecipante possono essere impostate nel campo `ParticipantDetails.ParticipantCapabilities`.

1. Una volta [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)completato con successo, restituisce un token [partecipante](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials). Questo token può essere utilizzato in una richiesta a [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)con `Type` set to. `WEBRTC_CONNECTION` La risposta include [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)che può essere utilizzata per partecipare alla riunione utilizzando le [librerie client SDK di Amazon Chime](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html) per il partecipante aggiuntivo creato. Segui le [istruzioni di integrazione](config-com-widget2.md) per consentire all’utente finale dell’applicazione di partecipare alla riunione.
**Nota**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)restituisce un errore Bad Request se l'agente non è ancora connesso al contatto. Per le applicazioni aziendali in cui gli utenti possono tentare di partecipare prima che l’agente sia connesso, consulta [Gestione degli accessi simultanei degli utenti](#handling-concurrent-joins).

1. I clienti aggiuntivi possono connettersi in qualsiasi momento dopo la [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)restituzione. Una volta che i partecipanti sono entrati nella chiamata, [tutti i comportamenti di voce e registrazione aggiuntivi sono simili alla funzionalità multiparte](multi-party-calls.md). I nuovi partecipanti possono abilitare la condivisione di video e schermate, se le loro funzionalità sono state abilitate nella [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)richiesta.
**Nota**  
Solo sei partecipanti (clienti e agenti) in totale possono partecipare a una chiamata attiva in qualsiasi momento. Le librerie client dell’SDK di Amazon Chime restituiscono un codice di stato che indica che la chiamata ha il numero massimo di partecipanti quando viene intrapresa un’azione per aggiungere altri partecipanti oltre il limite durante l’accesso alla riunione.

1. Una volta eseguita la connessione alla chiamata e quindi la disconnessione (in modo regolare o non regolare) per un periodo di tempo preconfigurato, le credenziali dei partecipanti non sono più valide per la chiamata. Se l'`onAudioVideoDidStop`osservatore della libreria clienti riceve un codice di stato che indica che il partecipante non è più valido, le applicazioni possono attivare una nuova chiamata [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)da [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)e verso il backend aziendale per partecipare nuovamente alla chiamata.

1. [Per ogni connessione utente aggiuntiva, Amazon Connect crea un nuovo contatto e un nuovo record di contatto.](ctr-data-model.md) Tutti i contatti aggiuntivi sono PreviousContactId impostati su InitialContactId (ovvero quello creato dall'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API) per ricondurlo al contatto originale. Ogni record di contatto:
   + Ha un **"InitiationMethod«: «WEBRTC\$1API**»
   + Ha i seguenti attributi di segmento:

     ```
        "SegmentAttributes": {
           "connect:Subtype": {
             "ValueString": "connect:WebRTC"
           }
         },
     ```

   Inoltre, ogni record di contatto ha il nome visualizzato fornito in `CreateParticipant`. Le informazioni dell’agente non vengono compilate per nessun contatto utente aggiuntivo. Questo serve a evitare la duplicazione delle informazioni dell’agente.

   Il diagramma seguente illustra come IDs vengono mappati i contatti precedenti e successivi in uno scenario in cui vengono aggiunti più partecipanti e agenti in una chiamata Web, in-app o videochiamata.  
![\[Diagramma che mostra come IDs vengono mappati i contatti per le chiamate WebRTC multipartitiche\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## Gestione degli accessi simultanei degli utenti
<a name="handling-concurrent-joins"></a>

Le aziende potrebbero voler creare applicazioni a cui gli utenti possano accedere in qualsiasi ordine e in qualsiasi momento. Ad esempio, l’applicazione può inviare tramite e-mail a più utenti un link con l’ID di un appuntamento esterno da utilizzare per partecipare a una chiamata a un orario prestabilito. Per ottenere questo comportamento, i backend aziendali devono garantire quanto segue:
+ Il primo utente che si unisce attiva una richiesta. StartWeb RTCContact 
+ Tutti gli utenti aggiuntivi utilizzano CreateParticipant e CreateParticipantConnection, ma **solo dopo che il primo utente si è connesso a un agente**.

Questa sezione descrive una possibile implementazione, supponendo che il backend aziendale contenga un archivio (come DynamoDB) in grado di contenere metadati sugli appuntamenti programmati. Tieni presente che gli appuntamenti pianificati non sono una funzionalità Amazon Connect, ma dell'implementazione di esempio.

Quando l’utente apre la pagina, deve inviare una richiesta al backend. Il backend controlla quanto segue:
+ Se l’utente è in grado di iniziare l’appuntamento e se è l’ora corretta.
+ Se il Amazon Connect contatto è già stato creato [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)chiamando.

**Se il contatto non è già stato creato**, il cliente deve chiamare l'[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API con un [flusso](connect-contact-flows.md) personalizzato e un [attributo](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes) che indichi la coda degli agenti dell'agente corrispondente che avrebbe dovuto partecipare alla chiamata. Il flusso deve includere un blocco [Imposta coda di lavoro](set-working-queue.md) configurato per utilizzare la coda dell’agente specificata negli attributi. Il flusso deve quindi terminare con un blocco [Trasferisci alla coda](transfer-to-queue.md). Prima che l’API venga chiamata, il backend deve aggiornare atomicamente l’archivio per spostare la chiamata dallo stato “Nessuno” allo stato “Creazione” e gestire eventuali eccezioni di modifica simultanee.

Le credenziali di [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)devono essere restituite al cliente e quest'ultimo deve partecipare immediatamente alla chiamata. Il contatto deve essere contrassegnato come “Creato” nell’archivio aziendale, insieme all’ID di contatto. **L’API aziendale deve essere sincronizzata tra tutti i possibili partecipanti.** Questo può essere fatto utilizzando le operazioni atomiche fornite da un database.

**Se il contatto è in stato di creazione**, l’utente aggiuntivo deve ricevere questo stato, visualizzare le informazioni pertinenti e riprovare dopo una breve attesa.

**Se il contatto viene creato**: devono recuperare l'ID del contatto e chiamare l'[DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API. Il backend aziendale deve cercare il campo **`Contact.AgentInfo.ConnectedToAgentTimestamp`**. Se il campo non esiste, significa che il primo utente non si è connesso all’agente e l’utente aggiuntivo deve visualizzare le informazioni pertinenti e riprovare dopo una breve attesa.

Se il campo esiste, il backend dovrebbe chiamare [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)e poi ottenere [CreateParticipantConnection[ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html), come descritto nelle sezioni precedenti.

Il flusso di backend deve essere simile al seguente.

![\[Diagramma di flusso del backend per la gestione degli accessi utente simultanei\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/multiparty-backend-flow.png)


Puoi fare riferimento agli [esempi di chiamate in-app di Amazon Connect](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web) GitHub per l'implementazione.

**L’agente non effettuerà l’accesso utilizzando lo stesso sito web**. L’agente deve impostare il proprio stato nel [Contact Control Panel](launch-ccp.md) su **Disponibile**. Quando il primo cliente effettua l’accesso, l’agente viene chiamato automaticamente.

## Fatturazione
<a name="multiuser-billing"></a>

La fatturazione per i partecipanti aggiuntivi avviene nello stesso modo della fatturazione esistente per il cliente iniziale e per gli eventuali agenti che partecipano alla chiamata. Tutti i processi di condivisione dell’audio, del video e dello schermo prevedono costi specifici per ogni partecipante.

## Comportamento durante l’attesa
<a name="multiuser-hold-behavior"></a>

Durante una chiamata video o una sessione di condivisione dello schermo, gli agenti possono vedere il video o lo schermo condiviso dal partecipante anche quando quest’ultimo è in attesa. È responsabilità del partecipante gestire le PII di conseguenza. Se si utilizza l’applicazione CCP nativa, il video dell’agente viene disabilitato se un partecipante che non è un agente è in attesa. Se desideri modificare questo comportamento, puoi creare un CCP e un widget di comunicazione personalizzati. 

Per ulteriori informazioni, consulta [Integrare le chiamate in-app, web e video e la condivisione dello schermo in modo nativo in un’applicazione](config-com-widget2.md). 

## Limitazione
<a name="multiuser-limitations"></a>

La seguente limitazione esiste quando si creano partecipanti aggiuntivi per le chiamate in-app, web e video e la condivisione dello schermo:
+ I partecipanti aggiuntivi non possono avere le funzionalità video impostate su **Invia** se il contatto originale è stato creato con le funzionalità video del cliente impostate su **Nessuno**.

# Personalizzare l’esperienza cliente per chiamate in-app, web e video in Amazon Connect
<a name="optional-widget-steps"></a>

I passaggi descritti in questo argomento sono facoltativi ma consigliati. Consentono di personalizzare l'esperienza del cliente in base alle azioni precedentemente intraprese all'interno dell'app. Questa opzione offre un maggiore controllo sull'avvio di nuove chiamate, inclusa la possibilità di passare informazioni contestuali come attributi.

 Dopo aver eseguito questi passaggi, dovrai collaborare con l'amministratore del tuo sito web per configurare i server web in modo che emettano JSON Web Tokens (JWTs) per nuove chiamate

1. Se hai già creato il widget di comunicazione, scegli il widget nella pagina **Widget di comunicazione** per modificarlo. 

1. Nella sezione **Dominio e sicurezza**, scegli **Modifica**. 

1. In **Aggiungi sicurezza per le richieste del widget di comunicazione**, scegli **Sì**.  
![\[L'opzione Sì.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. Seleziona **Salva e continua**. Amazon Connect crea il widget insieme a quanto segue:
   + Amazon Connect fornisce una chiave di sicurezza di 44 caratteri nella pagina successiva che puoi utilizzare per creare. JWTs
   + Amazon Connect aggiunge una funzione di callback all'interno dello script di incorporamento del widget di comunicazione che verifica la presenza di un JWT quando viene avviata una chiamata.

     È necessario implementare la funzione di callback nel frammento incorporato, come mostrato nell'esempio seguente.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Nel passaggio successivo, riceverai una chiave di sicurezza per tutte le chiamate avviate sui tuoi siti web. Chiedi all'amministratore del tuo sito Web di configurare i server Web in modo che emettano JWTs l'utilizzo di questa chiave di sicurezza. 

1. Seleziona **Salva e continua**.

1. Copia lo snippet di codice HTML personalizzato e inseriscilo nel codice sorgente del tuo sito web.

## Metodo alternativo: passare gli attributi di contatto direttamente dal codice del frammento
<a name="pass-attrib-from-code"></a>

**Nota**  
Sebbene questi attributi rientrino nell’ambito del prefisso `HostedWidget-`, sono comunque modificabili a seconda del sito client. Utilizza la configurazione JWT se hai bisogno di dati PII o immutabili nel tuo flusso di contatto. 

L’esempio seguente mostra come passare gli attributi di contatto direttamente dal codice del frammento senza abilitare la sicurezza del widget. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...
  
  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Utilizzo degli attributi nei flussi di contatto
<a name="contact-flow-usage-voice"></a>

Il blocco di flusso [Verifica attributi contatti](check-contact-attributes.md) fornisce l’accesso a questi attributi tramite il namespace **Definito dal cliente**, come mostrato nell’immagine seguente. Puoi utilizzare il blocco di flusso per aggiungere una logica di ramificazione. Il percorso completo è `$Attribute.HostedWidget-attributeName`. 

![\[Immagine che mostra un blocco di flusso che si ramifica in prompt validi e non validi.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Copia del codice del widget di comunicazione e delle chiavi di sicurezza
<a name="copy-widget-script4"></a>

In questo passaggio, vengono confermate le selezioni, copiato il codice per il widget di comunicazione e incorporato nel sito web. Puoi anche copiare le chiavi segrete per creare il JWTs. 

### Chiave di sicurezza
<a name="widget-security-key4"></a>

Usa questa chiave di sicurezza di 44 caratteri per generare token web JSON dal tuo web server. Puoi anche aggiornare o ruotare le chiavi se devi cambiarle. Quando esegui questa operazione, Amazon Connect ti fornisce una nuova chiave e mantiene la chiave precedente fino a quando non hai la possibilità di sostituirla. Dopo aver distribuito la nuova chiave, puoi tornare ad Amazon Connect ed eliminare la chiave precedente.

![\[La chiave di sicurezza.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/chatwidget-security-key.png)


Quando i clienti interagiscono con l'icona di avvio della chiamata sul sito web, il widget di comunicazione richiede al web server un JWT. Quando viene fornito questo JWT, il widget lo includerà come parte della chiamata del cliente finale ad Amazon Connect. Amazon Connect utilizza quindi la chiave segreta per decrittografare il token. In caso di successo, ciò conferma che il JWT è stato emesso dal tuo web server e Amazon Connect instrada la chiamata agli agenti del tuo contact center.

#### Specifiche del token web JSON
<a name="jwts4"></a>
+ Algoritmo: **HS256**
+ Richieste: 
  + **sub:** *widgetId*

    Sostituisci il valore `widgetId` con il tuo widgetId. Per trovare il tuo widgetID, guarda l'esempio [Script del widget di comunicazione](add-chat-to-website.md#chat-widget-script).
  + **iat**: \$1emissione al momento.
  + **exp**: \$1scadenza (massimo 10 minuti).

  \$1 Per informazioni sul formato della data, consulta la documentazione IETF (Internet Engineering Task Force): [Token Web JSON (JWT)](https://tools.ietf.org/html/rfc7519), pagina 5. 

Il seguente frammento di codice mostra un esempio di come generare un JWT in Python:

```
payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

#### Script del widget di comunicazione
<a name="chat-widget-script4"></a>

L'immagine seguente mostra un esempio di JavaScript ciò che incorpori nei siti Web in cui desideri che i clienti possano chiamare il tuo contact center. Questo script visualizza il widget nell'angolo in basso a destra del sito web. 

L'immagine seguente mostra un esempio di dove trovare il widgetId.

![\[Lo script del widget di comunicazione.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/chatwidget-code.png)


Quando il sito web viene caricato, la prima cosa che il cliente vede è l'icona **Avvia**. Quando si sceglie questa icona, il widget di comunicazione viene aperto e i clienti possono chiamare gli agenti.

Per apportare modifiche al widget di comunicazione in qualsiasi momento, scegli **Modifica**.

**Nota**  
Le modifiche salvate aggiornano l'esperienza del cliente in pochi minuti. Conferma la configurazione del widget prima di salvarlo. 

![\[Il collegamento di modifica nell'anteprima del widget.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/chatwidget-call-edit.png)


Per apportare modifiche alle icone dei widget sul sito web, riceverai un nuovo frammento di codice per aggiornare direttamente il sito web.

# Personalizzazioni aggiuntive per il widget di chiamata web di Amazon Connect
<a name="more-customizations-web-calling-widget"></a>

Puoi aggiungere le seguenti personalizzazioni aggiuntive al widget per le chiamate web:
+ Applica la [sfocatura dello sfondo](#background-blur) al riquadro video del cliente.
+ Imposta il widget su [fullscreen](#fullscreen-mode).
+ Seleziona il [dispositivo con fotocamera predefinito](#choose-default-camera).
+ [Ridimensiona il video](#resize-video) per adattarlo al riquadro.

Le sezioni seguenti spiegano i dettagli delle personalizzazioni, i relativi casi d’uso e le modalità di configurazione. Puoi gestire queste personalizzazioni configurando `WebCallingCustomizationObject`.

**Topics**
+ [Sfocatura dello sfondo](#background-blur)
+ [Modalità a schermo intero](#fullscreen-mode)
+ [Scegliere il dispositivo predefinito da utilizzare come fotocamera](#choose-default-camera)
+ [Ridimensionamento del video](#resize-video)
+ [Configurazione dell'oggetto di personalizzazione](#configure-customization-object-web)
+ [Vincoli e opzioni supportate](#supported-options-web-calling)

## Sfocatura dello sfondo
<a name="background-blur"></a>

Questa personalizzazione controlla il comportamento di sfocatura dello sfondo del video del cliente. Se abilitata, lo sfondo del cliente è sfocato quando il video è attivo. Questo aiuta a proteggere le informazioni personali o gli spazi privati che potrebbero essere visibili in background durante la chiamata video.

Per attivare la sfocatura dello sfondo, imposta `videoFilter.backgroundBlur.option` su `ENABLED_ON_BY_DEFAULT` in `WebCallingCustomizationObject`.

## Modalità a schermo intero
<a name="fullscreen-mode"></a>

Usa questa personalizzazione per controllare il comportamento a tutto schermo del widget. È possibile abilitare la modalità a tutto schermo in due modi: 
+ Aggiungi un pulsante dedicato al widget. Il cliente può utilizzare il pulsante per attivare e disattivare la modalità a tutto schermo.

  Per aggiungere questo pulsante, imposta `fullscreen.displayButton` su `ENABLED`. 

O
+ Imposta il widget sulla modalità a tutto schermo al momento del caricamento.

  Per abilitare la modalità a tutto schermo al momento del caricamento, imposta `fullscreen.fullscreenOnLoad` su `ENABLED`.

È particolarmente utile attivare la modalità a tutto schermo quando il cliente deve concentrarsi sul widget, ad esempio durante la condivisione dello schermo.

Puoi utilizzare queste due opzioni singolarmente o in combinazione.

## Scegliere il dispositivo predefinito da utilizzare come fotocamera
<a name="choose-default-camera"></a>

Questa personalizzazione consente al widget di selezionare il dispositivo con fotocamera predefinito quando il cliente abilita il video, offrendo opzioni per la fotocamera anteriore o posteriore. Questa funzionalità è utile, ad esempio, per eseguire la diagnosi delle apparecchiature da remoto. Il cliente può utilizzare la fotocamera posteriore per mostrare l’apparecchiatura all’agente.

Per selezionare la fotocamera posteriore come predefinita, imposta `devices.defaultCamera` su `Back`.

## Ridimensionamento del video
<a name="resize-video"></a>

Questa personalizzazione controlla il modo in cui i riquadri video del cliente e dell’agente vengono ridimensionati nel widget. Ad esempio, il frame del video può essere ridimensionato per riempire l’intero riquadro video o per essere adattato al riquadro video, lasciando spazi vuoti se le proporzioni del frame del video non corrispondono a quelle del riquadro video.
+ Per ridimensionare il video del cliente, imposta `videoTile.localVideoObjectFit` sul valore di destinazione.
+ Per ridimensionare il video dell’agente, imposta `videoTile.remoteVideoObjectFit` sul valore di destinazione.

Per ulteriori informazioni, consulta [Vincoli e opzioni supportate](#supported-options-web-calling).

## Configurazione dell'oggetto di personalizzazione
<a name="configure-customization-object-web"></a>

Nell’esempio seguente viene illustrato come implementare le personalizzazioni opzionali per le chiamate web. Per una descrizione dettagliata di queste opzioni, consulta [Vincoli e opzioni supportate](#supported-options-web-calling). 

Puoi implementare alcuni o tutti i campi mostrati nell’esempio seguente. Se non implementi nessuna personalizzazione, i comportamenti predefiniti vengono utilizzati per i campi mancanti.

```
amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        },
        copyDisplayNameFromAuthenticatedChat: true
});
```

Nell’immagine seguente viene mostrato l’aspetto delle personalizzazioni quando non è attivata la modalità a tutto schermo. 

![\[Personalizzazioni quando non è attiva la modalità a tutto schermo.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/fullscreenmode.png)


Nell’immagine seguente viene mostrato l’aspetto delle personalizzazioni quando è attivata la modalità a tutto schermo.

![\[Personalizzazioni quando è attiva la modalità a tutto schermo.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/nonfullscreenmode.png)


## Vincoli e opzioni supportate
<a name="supported-options-web-calling"></a>

Nella tabella seguente sono elencati i campi di personalizzazione supportati e i vincoli sui valori consigliati.


| Opzione di layout personalizzato | Tipo | Valori | Description | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  stringa  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  Imposta la sfocatura dello sfondo del riquadro video del cliente. Per impostazione predefinita, quando il cliente abilita il video, il filtro di sfocatura dello sfondo viene applicato al riquadro video. Se non desideri abilitare il filtro per impostazione predefinita, puoi impostarlo su `ENABLED_OFF_BY_DEFAULT`; il cliente può comunque abilitare manualmente il filtro nella pagina delle preferenze del widget. | 
|  `fullscreen.displayButton`  |  stringa  |  `ENABLED`  |  Aggiunge un pulsante nell’angolo in alto a destra del widget per visualizzarlo a tutto schermo nel browser. Per impostazione predefinita, questo pulsante non viene aggiunto al widget; se desideri aggiungerlo, puoi impostarlo su `ENABLED`. | 
|  `fullscreen.fullscreenOnLoad`  |  stringa  |  `ENABLED`  |  Visualizza il widget a tutto schermo nel browser. Per impostazione predefinita, il widget verrà ancorato all’angolo in basso a destra della pagina web; impostandolo su `ENABLED` il widget viene visualizzato a tutto schermo nel browser. | 
|  `devices.defaultCamera`  |  stringa  |  `Front` \$1 `Back`  | Imposta il dispositivo con fotocamera predefinito quando il cliente abilita il video. Serve nei casi d’uso relativi a dispositivi mobili o tablet. Per impostazione predefinita, è selezionata la fotocamera predefinita ([consulta i dettagli](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (Per ulteriori informazioni, consultate il [metodoMediaDevices: enumerateDevices () nella documentazione per gli sviluppatori di Mozilla.)](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) Quando lo imposti su `Front\|Back`, viene selezionata la fotocamera corrispondente, se disponibile. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  booleano  |  `true` \$1 `false`  | Nel caso in cui l’utente finale abbia effettuato l’autenticazione utilizzando il blocco di flusso [Autentica il cliente](authenticate-customer.md), impostando il valore su `true`, il nome visualizzato verrà copiato nel contatto vocale. Il valore predefinito è `false`. | 
|  `videoTile.localVideoObjectFit`  |  stringa  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  Imposta la proprietà [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) del riquadro video del cliente nel widget. Per impostazione predefinita, il valore è determinato dalla larghezza e dall’altezza relative alla risoluzione video: se l’altezza è maggiore della larghezza, sarà `contain`, altrimenti sarà `cover`. Per una descrizione dettagliata di ogni valore, consulta [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) nella documentazione per gli sviluppatori di Mozilla.  Questo attributo viene applicato solo all’altezza e alla larghezza di visualizzazione del video del cliente nel widget. L’altezza e la larghezza del video del cliente inviato all’agente rimangono inalterate.  | 
|  `videoTile.remoteVideoObjectFit`  |  stringa  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | Imposta la proprietà [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) del riquadro video del cliente nel widget. Per impostazione predefinita, il valore è determinato dalla larghezza e dall’altezza relative alla risoluzione video: se l’altezza è maggiore della larghezza, sarà `contain`, altrimenti sarà `cover`. Per una descrizione dettagliata di ogni valore, consulta [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) nella documentazione per gli sviluppatori di Mozilla.  Questo attributo viene applicato solo all’altezza e alla larghezza di visualizzazione del video dell’agente nel widget.   | 

# Integrare le chiamate video e la condivisione dello schermo nel desktop personalizzato per agenti utilizzando Amazon Connect Streams JS
<a name="integrate-video-calling-for-agents"></a>

Questo argomento è destinato agli sviluppatori. Per i desktop personalizzati per agenti, devi apportare delle modifiche per supportare le chiamate video e la condivisione dello schermo. Di seguito sono riportati i passaggi di alto livello.

**Nota**  
Se incorpori il CCP direttamente nella tua applicazione agente personalizzata, assicurati che `allowFramedVideoCall` sia impostato su true quando avvii il CCP utilizzando [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

1. Usa [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) per verificare se il contatto in arrivo è un contatto WebRTC. Usa il sottotipo di contatto `"connect:WebRTC"` come visualizzato nel codice di esempio seguente:

   `contact.getContactSubtype() === "connect:WebRTC"`

1. Puoi recuperare il nome visualizzato del cliente utilizzando il campo del nome in ` contact contact.getName()`.

## Aggiungere il supporto per il video
<a name="support-video"></a>

Completa i seguenti passaggi per aggiungere il supporto per la gestione del video quando i tuoi clienti lo hanno abilitato.

1. Per verificare se un contatto dispone di funzionalità video:

   ```
   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()
   ```

1. Per verificare se l'agente dispone dell'autorizzazione video per gestire le videochiamate:

   `agent.getPermissions().includes('videoContact');`

1. Per accettare una videochiamata, il contatto deve disporre della funzionalità video e l'agente deve disporre dell'autorizzazione video.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Per partecipare a una sessione video, chiama `getVideoConnectionInfo`:

   ```
   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Per creare un'interfaccia utente video e partecipare a una sessione di videoconferenza, consulta:
   + Amazon Chime SDK [per JavaScript](https://github.com/aws/amazon-chime-sdk-js) on GitHub 
   + Amazon Chime Libreria di [componenti SDK React](https://github.com/aws/amazon-chime-sdk-component-library-react) su GitHub

1. Per semplicità, i seguenti frammenti di codice utilizzano esempi tratti dalla libreria Amazon Chime SDK React Components.

   ```
   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }
   ```

1. Per eseguire il rendering della griglia video, utilizza la [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)libreria Amazon Chime SDK React Components o personalizza il comportamento dell'interfaccia utente utilizzando. [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page) 

1. Per eseguire il rendering di un'anteprima video, puoi utilizzare [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)i [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)componenti. Per scegliere o modificare il video di una videocamera, puoi utilizzare `meetingManager.selectVideoInputDevice` o `meetingManager.startVideoInput ` se la riunione è in corso.

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. Per implementare la sfocatura dello sfondo, consulta [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

1. Per un esempio di codice su come creare un'esperienza video personalizzata, guarda questo esempio dell'SDK di Amazon Chime : [demo della conferenza React di Amazon Chime](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Aggiungere il supporto per la condivisione dello schermo
<a name="support-screen-sharing"></a>

**Nota**  
Se utilizzi il out-of-box CCP direttamente nella tua applicazione agente personalizzata, assicurati che `allowFramedScreenSharing` sia `allowFramedScreenSharingPopUp` impostato su true quando avvii il CCP utilizzando [Amazon Connect](https://github.com/aws/amazon-connect-streams) Streams JS.   
Impostando `allowFramedScreenSharing` su true il pulsante di condivisione dello schermo viene abilitato su un solo CCP in una finestra o in una scheda. Impostando `allowFramedScreenSharingPopUp` su true l’app per la condivisione dello schermo viene avviata in una finestra separata quando l’agente sceglie il pulsante di condivisione dello schermo. Per ulteriori dettagli, consulta la documentazione di [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

Completa i seguenti passaggi per abilitare la condivisione dello schermo sui desktop personalizzati per agenti. 

1. Verifica se un contatto dispone di funzionalità di condivisione dello schermo. 

   ```
   // Return true if any connection has screen sharing send capability
   contact.hasScreenShareCapability()
   
   // Return true if the agent connection has screen sharing send capability
   contact.canAgentSendScreenShare()
   
   // Return true if customer connection has screen sharing send capability
   contact.canCustomerSendScreenShare()
   ```

1. Verifica se l’agente dispone dell’autorizzazione video.

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. Verifica se l’agente può avviare una sessione di condivisione dello schermo per il contatto idoneo.

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Chiama `startScreenSharing` per avviare la sessione di condivisione dello schermo. In questo modo `ScreenSharingActivated` viene aggiunto al contatto e quindi puoi cercare tale valore nel [record del contatto](ctr-data-model.md). 

   ```
   contact.startScreenSharing();
   ```

1. Chiama `getVideoConnectionInfo` per partecipare alla sessione. Puoi saltare il passaggio se l’agente ha effettuato l’accesso alla sessione video per gestire il video.

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Effettua l’accesso alla sessione utilizzando la libreria React Components dell’SDK di Amazon Chime. Per un frammento di codice, consulta il passaggio 6 in [Aggiungere il supporto per il video](#support-video).

1. Usa lo stesso [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)di Amazon Chime SDK React Components per eseguire il rendering del riquadro video di condivisione dello schermo. [Per ulteriori informazioni, consulta [useContentShareState and Controls](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) useContentShare](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Chiama `stopScreenSharing` quando termina la sessione.

   ```
   contact.stopScreenSharing();
   ```

1. Puoi ricevere eventi per l’attività di condivisione dello schermo effettuando la sottoscrizione ai seguenti callback:

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```

# Abilitare la limitazione degli URL per la condivisione dello schermo
<a name="screen-sharing-url-restriction"></a>

Puoi gestire URLs ciò che i tuoi clienti e agenti possono condividere durante il contatto. Ciò consente di migliorare la sicurezza e la privacy. Quando un cliente o un agente condivide un URL che non è nella lista degli elementi consentiti, riceve un messaggio di errore e il video di condivisione dello schermo viene automaticamente messo in pausa e oscurato. 

**Importante**  
Sono supportati i seguenti browser:   
Chrome versione 109 e successive
Edge versione 109 e successive
Agenti e clienti possono condividere solo la scheda del browser. Non possono condividere la finestra o l’intero schermo. Se abiliti questa funzionalità e i clienti o gli agenti utilizzano un browser non supportato, una finestra o l’intero schermo, riceveranno un errore.

Completa i seguenti passaggi per abilitare la restrizione degli URL per la condivisione dello schermo.

## Passaggio 1: creare un URLs elenco consentito
<a name="step1-url-restriction"></a>

Si configurano gli elenchi di consentiti URLs utilizzando attributi predefiniti. Completa questa procedura:

1. Nel sito Web di Amazon Connect amministrazione, scegli **** Routing, Attributi **predefiniti****, **Aggiungi** attributo predefinito**.

1. Nella sezione **Aggiungi attributi predefiniti**, all’interno della casella **Attributo predefinito**, aggiungi uno dei seguenti elementi.
   + Per creare una lista di elementi consentiti per la condivisione dello schermo del cliente, inserisci `screensharing:customer-allowed-urls`.
   + Per creare una lista di elementi consentiti per la condivisione dello schermo dell’agente, inserisci `screensharing:agent-allowed-urls`.

1. Nella casella **Valore**, inserisci l’URL consentito. Può essere un URL completamente formattato o un modello di stringhe per la corrispondenza a livello di sottostringhe, ad esempio ` https://mycompany` o ` /mytransactions`. Nella seguente tabella vengono illustrati alcuni esempi di formati validi.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. Salva l’elenco. Vengono URLs visualizzati nella pagina **Attributi predefiniti**, come illustrato nell'esempio seguente.   
![\[Pagina Attributi predefiniti.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## Passaggio 2: aggiungere lo script all’elenco dei siti web
<a name="step2-url-restriction"></a>

Devi incorporare uno script nel sito web in modo che l’URL della pagina possa essere esposto all’applicazione di acquisizione. Ottieni il gestore di acquisizione da un file sull' CloudFront endpoint Amazon ospitato da Amazon Connect. Completa le istruzioni riportate di seguito.

1. Nel sito Web di Amazon Connect amministrazione, scegli **Canali, widget** di **comunicazione**. Nella pagina di riepilogo Widget di comunicazione, cerca lo script del widget. Puoi ottenere l’endpoint dall’attributo `s.src`, come mostrato nell’esempio seguente.   
![\[Script del widget.\]](http://docs.aws.amazon.com/it_it/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   L'endpoint può trovarsi in una AWS regione diversa da quella dell'istanza Amazon Connect. Per prestazioni ottimali, si consiglia di utilizzare la stessa Regione dell’istanza Amazon Connect. 

1. Sostituisci il seguente segnaposto `${endpoint}` con il valore del passaggio precedente. Copia l’intero frammento di codice e incollalo nel livello superiore del sito web.

   ```
   <script type="text/javascript" src='${endpoint}/amazon-connect-url-restriction.js'></script>
   ```