Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
# Cómo añadir el widget de Amazon Connect en un sitio web a fin de aceptar contactos de chat, tareas, correo electrónico y llamadas web
En los temas de esta sección, se explica cómo crear y personalizar un widget de comunicaciones para un sitio web. Creará un formulario de contacto que determine el comportamiento de los contactos creados a través de su widget y, a continuación, personalizará el aspecto y la funcionalidad del widget.
**Topics**
+ [Paso 1: creación de un formulario de contacto para el widget](#create-web-form)
+ [Paso 2: personaliza tu widget de comunicaciones](#customize-communications-widget)
+ [Paso 3: Especifique los dominios del sitio web en los que espera mostrar el widget de comunicaciones](#communications-widget-domains)
+ [Paso 4: Confirma y copia el código del widget de comunicaciones y las claves de seguridad](#confirm-and-copy-communications-widget-script)
## Paso 1: creación de un formulario de contacto para el widget
En este paso, creará y personalizará una vista que determine el comportamiento de los contactos creados a través de su widget.
1. Inicie sesión en el sitio web de Amazon Connect administración en[https://instance name.my.connect.aws/](https://instance name.my.connect.aws/). En la pestaña **Enrutamiento**, seleccione **Flujos**.
1. En la parte superior izquierda, haga clic en **Vistas**.
1. Seleccione **Crear vista**.
1. Aquí puede configurar un formulario de contacto para sus clientes mediante el [creador sin código](no-code-ui-builder.md). Consejos importantes:
+ El uso del componente de formulario le permitirá vincular las entradas del formulario a su contacto al crearlo. La vinculación de formularios le permitirá recibir información directamente de cualquier persona que interactúe con su widget y utilizar la información que incluya en el formulario durante la creación del contacto.
+ El componente Connect Action es el elemento más importante del formulario para crear un contacto. Este componente debe usarse sin ningún otro componente de tipo botón en el formulario.
+ Debe haber exactamente un componente Connect Action para usar el widget Ver con un formulario de contacto.
+ El componente Connect Action admite tres opciones: ConnectActionType
+ StartEmailContact
+ StartTaskContact
+ StartChatContact
Tanto el correo electrónico como la tarea se pueden utilizar en un formulario de contacto. Para crear un formulario previo al chat para los contactos del chat, consulte [Adición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect](add-chat-to-website.md).
+ Hay muchas opciones de estilo para los componentes de Ver, y le permiten personalizar el formulario para adaptarlo a su entorno.
1. Una vez que haya agregado un **botón Connect Action** al formulario, puede establecer valores para los contactos creados por el formulario vinculándolos a las opciones del botón Connect Action. Los componentes que desee vincular deben estar en el mismo formulario de la vista que el **botón Connect Action**.
![\[La activación de la seguridad para las nuevas solicitudes de widgets de comunicación.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/create-web-form-components-1.png)
Los siguientes componentes son compatibles con la vinculación del formulario:
+ Entrada de formulario
+ Menú desplegable (desactivar la selección múltiple)
+ Selector de fecha
+ Área de texto
+ Selector de tiempo
1. Cuando la vista esté lista, seleccione **Publicar**.
## Paso 2: personaliza tu widget de comunicaciones
En este paso, se personaliza la experiencia del widget de comunicaciones para los clientes.
1. Inicio de sesión en el sitio web de administración de Amazon Connect en [https://instance name.my.connect.aws/](https://instance name.my.connect.aws/). Seleccione **Personalizar el widget de comunicaciones**.
1. En la página **Widgets de comunicaciones**, seleccione Añadir widget de comunicaciones para empezar a personalizar una nueva experiencia de widgets de comunicaciones. Para editar, eliminar o duplicar un widget de comunicaciones existente, elija una de las opciones de la columna **Acciones**.
1. Introduzca un **nombre** y una **descripción** para el chat de comunicaciones.
**nota**
El nombre debe ser único para cada widget de comunicaciones creado en una instancia de Amazon Connect.
1. En la sección **Opciones de comunicación**, seleccione **Agregar formulario de contacto**.
1. Seleccione la vista que ha configurado en el paso anterior. Si el componente Connect Action de la vista no tiene un flujo de contactos establecido, tendrá que configurar uno aquí.
1. Haga clic en **Save and Continue (Guardar y continuar)**.
En la página **Crear widget de comunicación**, elija los estilos del botón del widget, los nombres públicos y los estilos. A medida que elija estas opciones, la versión preliminar del widget se actualizará automáticamente para que pueda ver el aspecto de la experiencia para los clientes.
**nota**
La vista previa no muestra el formulario de contacto de Ver que ha creado. Solo se muestra el estilo del encabezado.
### Tipo de visualización
Puede elegir entre dos tipos de visualización para los widgets del formulario de contacto:
+ El *botón de acción flotante* le permite fijar el widget como un botón interactivo en la esquina inferior derecha de la página web
+ El elemento *incrustado en línea* le permite incrustar el widget directamente en la página web sin necesidad de pulsar un botón para cargarlo
### Estilos de botón
1. Para elegir los colores del fondo del botón, introduzca valores hexadecimales (códigos de color HTML).
1. Elija Blanco o Negro para el color del icono. El color del icono no se puede personalizar.
### Encabezado del widget
1. Proporcione valores para el mensaje y el color del encabezado y el color de fondo del widget.
1. *URL del logotipo*: inserte una URL en el banner de su logotipo desde un bucket de Amazon S3 u otro origen en línea.
**importante**
La versión preliminar del widget de comunicaciones en la página de personalización no mostrará el logotipo si procede de un origen que no sea un bucket de Amazon S3. No obstante, el logotipo se mostrará cuando se implemente el widget de comunicaciones personalizado en su página.
El banner debe estar en formato .svg, .jpg o .png. La imagen puede tener 280 píxeles (ancho) por 60 píxeles (alto). Cualquier imagen que supere esas dimensiones se escalará para ajustarse al espacio del componente de logotipo de 280 x 60.
+ Para obtener instrucciones sobre cómo cargar en S3 un archivo como el banner de su logotipo, consulte [Carga de objetos](#) en la *Guía del usuario de Amazon Simple Storage Service*.
+ Asegúrese de que los permisos de imagen estén configurados correctamente para que el widget de comunicaciones tenga permisos para acceder a la imagen. Para obtener más información sobre cómo hacer que un objeto S3 sea de acceso público, consulte [Paso 2: cómo añadir una política de bucket](#) en el tema Configuración de permisos para el acceso al sitio web.
## Paso 3: Especifique los dominios del sitio web en los que espera mostrar el widget de comunicaciones
1. Introduzca los dominios del sitio web en los que desea colocar el widget de comunicaciones. El widget se cargará únicamente en los sitios web que seleccione en este paso.
Seleccione **Agregar dominio** para agregar hasta 50 dominios.
![\[La opción de agregar dominio.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-add-domain.png)
Comportamiento de las listas de dominios permitidos:
+ Los subdominios están incluidos automáticamente. Por ejemplo, si permite example.com, sus subdominios (como sub.example.com) también estarán permitidos.
+ El protocolo http:// o https:// debe coincidir de forma exacta con la configuración. Especifique el protocolo exacto al configurar los dominios permitidos.
+ Todas las rutas URL están permitidas automáticamente. Por ejemplo, si se permite example.com, todas las páginas incluidas en él (por ejemplo). com/cart or example.com/checkout) son accesibles. No puede permitir ni bloquear subdirectorios específicos.
**importante**
Compruebe que su sitio web URLs sea válido y no contenga errores. Incluya la URL completa que comience por https://.
Le recomendamos utilizar https:// para sus sitios web y aplicaciones de producción.
1. En **Añadir seguridad a tu widget de comunicaciones**, te recomendamos que selecciones **Sí** y que trabajes con el administrador del sitio web para configurar los servidores web a fin de emitir tokens web JSON (JWTs) para las nuevas solicitudes de contacto. Esto le proporciona un mayor control a la hora de iniciar nuevos contactos, lo que incluye la posibilidad de verificar que las solicitudes enviadas a Amazon Connect proceden de usuarios autenticados.
![\[La activación de la seguridad para las nuevas solicitudes de widgets de comunicación.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-choose-security.png)
Si elige **Sí**, obtendrá lo siguiente:
+ Amazon Connect proporciona una clave de seguridad de 44 caracteres en la página siguiente que puede utilizar para crear tokens web JSON ()JWTs.
+ Amazon Connect añade una función de devolución de llamada en el script de inserción del widget de comunicaciones que comprueba si hay un token web JSON (JWT) cuando se inicia un contacto.
Debe implementar la función de devolución de llamada en el fragmento insertado, como se muestra en el siguiente ejemplo.
```
amazon_connect('authenticate', function(callback) {
window.fetch('/token').then(res => {
res.json().then(data => {
callback(data.data);
});
});
});
```
Si elige esta opción, en el siguiente paso obtendrá una clave de seguridad para todas las solicitudes de contacto iniciadas en sus sitios web. Pídale al administrador de su sitio web que configure sus servidores web para que puedan JWTs utilizar esta clave de seguridad.
1. Seleccione **Save**.
## Paso 4: Confirma y copia el código del widget de comunicaciones y las claves de seguridad
En este paso, confirme las selecciones y copie el código para el widget de comunicaciones e insértelo en su sitio web. Si optaste por utilizarlos JWTs en el [paso 3](#communications-widget-domains), también puedes copiar las claves secretas para crearlas.
### Clave de seguridad
Utilice esta clave de seguridad de 44 caracteres para generar tokens web JSON desde su servidor web. También puede actualizar, o rotar, las claves si necesita cambiarlas. Al hacerlo, Amazon Connect le proporciona una clave nueva y conserva la clave anterior hasta que tenga la oportunidad de reemplazarla. Una vez implementada la nueva clave, puede volver a Amazon Connect y eliminar la clave anterior.
![\[La clave de seguridad proporcionada por Amazon Connect.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-security-key.png)
Cuando sus clientes interactúan con el widget de comunicaciones en su página web, el widget solicita a su servidor web un JWT. Cuando se proporcione este JWT, el widget lo incluirá como parte de la solicitud de contacto del cliente final a Amazon Connect. A continuación, Amazon Connect utiliza la clave secreta para descifrar el token. Si se realiza correctamente, esto confirma que el JWT lo ha emitido su servidor web y Amazon Connect enruta la solicitud de contacto a los agentes de su centro de contacto.
#### Aspectos específicos del token web JSON
+ Algoritmo: **HS256**
+ Notificaciones:
+ **sub**: *widgetId*
Reemplace `widgetId` por su propio widgetId. Para encontrar su widgetId, consulte el ejemplo en [Script del widget de comunicaciones](#communications-widget-script).
+ **iat**: \$1hora de emisión.
+ **exp**: \$1vencimiento (10 minutos máximo).
+ **segmentAttributes (opcional)**: un conjunto de pares clave-valor definidos por el sistema que se almacenan en segmentos de contacto individuales mediante un mapa de atributos. Para obtener más información, consulte SegmentAttributes la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.
+ **atributos (opcional)**: objeto con pares string-to-string clave-valor. Los atributos de contacto deben seguir las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API.
+ **relatedContactId (opcional)**: cadena con un identificador de contacto válido. relatedContactId Deben seguir las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
+ **customerId (optional)**: puede ser un ID de Perfiles de clientes de Amazon Connect o un identificador personalizado de un sistema externo, como un CRM.
\$1 Para obtener información sobre el formato de fecha, consulte el siguiente documento del grupo de trabajo de ingeniería de Internet (IETF): [Token web JSON (JWT)](https://tools.ietf.org/html/rfc7519), página 5.
El siguiente fragmento de código muestra un ejemplo de cómo generar un JWT en Python:
```
import jwt
import datetime
CONNECT_SECRET = "your-securely-stored-jwt-secret"
WIDGET_ID = "widget-id"
JWT_EXP_DELTA_SECONDS = 500
payload = {
'sub': WIDGET_ID,
'iat': datetime.datetime.utcnow(),
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS),
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} }
header = { 'typ': "JWT", 'alg': 'HS256' }
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```
### Script del widget de comunicaciones
La siguiente imagen muestra un ejemplo de lo JavaScript que incluyes en los sitios web en los que quieres que los clientes interactúen con tu centro de contacto. Este script muestra el widget en la esquina inferior derecha de su página web.
**nota**
Incluye el script del widget en el elemento HTML que necesita renderizar el widget cuando utilice el estilo incrustado en línea.
![\[Script del widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-code.png)
Cuando se carga la página web, los clientes ven primero el icono del widget. Si eligen este icono, se abre el widget de comunicaciones y los clientes pueden iniciar el contacto con los agentes.
Para realizar cambios en el widget de comunicaciones en cualquier momento, elija **Editar**.
**nota**
Los cambios guardados actualizan la experiencia del cliente en pocos minutos. Confirme la configuración de su widget antes de guardarla.
![\[Enlace de edición de la versión preliminar del widget.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-edit.png)
Para realizar cambios en los iconos de los widgets de la página web, recibirá un nuevo fragmento de código para actualizar directamente su página web.