Cómo EMBEBER UN GPT en una página WEB [Tutorial paso a paso]

Summary

El video ofrece una guía detallada sobre cómo integrar un asistente de inteligencia artificial, similar a un GPT, en una página web. El creador explica que, aunque un GPT personalizado es fácil de configurar a través de la web de Chat GPT, su uso está limitado a la plataforma de Chat GPT y no se puede integrar directamente en otras páginas o aplicaciones. Para superar esta limitación, se debe crear un asistente a través de la plataforma de desarrolladores de Open AI. El proceso implica crear un asistente, configurarlo con instrucciones y herramientas, y luego integrarlo en la página web utilizando una API. Se recomienda utilizar una herramienta como WordPress para integrar el asistente sin necesidad de escribir código. El video también aborda la configuración de estilos y la personalización del asistente, así como la consideración de los costos asociados con el uso de la API y los modelos de inteligencia artificial más avanzados. Finalmente, se destaca la flexibilidad de la herramienta para integrarse en múltiples canales de comunicación, como WhatsApp e Instagram Messenger.

Takeaways

• 🤖 Para integrar un GPT en una página web, se debe crear un asistente personalizado a través de la plataforma de desarrolladores de Open AI.
• 📝 Es posible configurar un GPT con facilidad, proporcionándole instrucciones, acceso a archivos y herramientas.
• 🚫 Los GPT públicos creados en la web de Chat GPT no se pueden integrar directamente en una página web o aplicación.
• 🌐 Para integrar un asistente en una página web, se necesita interactuar con él a través de una API, lo que implica escribir código.
• 📱 Existe una herramienta llamada WordPress que permite integrar un asistente en una página web sin necesidad de escribir código.
• 💡 WordPress, originalmente diseñada para chatbots, ahora también sirve para construir agentes de inteligencia artificial.
• 🔗 Para conectar WordPress con un asistente de Open AI, se debe generar una plantilla y luego importarla a WordPress.
• 🔑 Se necesitan dos variables para configurar la conexión entre WordPress y la cuenta de Open AI: una API key y el ID del asistente.
• 💰 El uso de la API y la integración de un asistente en la página web pueden tener un costo asociado, dependiendo del modelo y las herramientas utilizadas.
• 🎨 Los estilos del chatbot se pueden personalizar y configurar a través de una URL de hoja de estilos proporcionada por WordPress.
• 📈 La herramienta WordPress ofrece integración con múltiples canales, como WhatsApp e Instagram, aunque la integración puede ser más compleja que con la webchat.
• 📊 El costo de los servicios de asistente en la plataforma de desarrolladores de Open AI varía según el modelo de lenguaje, la cantidad de tokens utilizados y las herramientas adicionales utilizadas.

Q & A

¿Cómo se puede integrar un GPT en una página web?

Para integrar un GPT en una página web, primero se debe crear un asistente personalizado a través de la plataforma de desarrolladores de Open AI. Luego, se utiliza una herramienta como WordPress para construir y diseñar el chatbot, que se conecta con el asistente de Open AI a través de una plantilla que contiene el código necesario para la comunicación con la API del asistente.

¿Qué es un GPT y cómo se diferencia de un asistente creado en la plataforma de desarrolladores de Open AI?

Un GPT es un asistente personalizado que se puede crear desde la web de Chat GPT, siempre y cuando seas usuario de Chat GPT Plus. Es muy fácil de configurar. Mientras que un asistente creado en la plataforma de desarrolladores de Open AI se puede integrar en una página web o aplicación y ofrece la posibilidad de elegir el modelo de GPT que se utilizará, lo que no es posible al crear un GPT.

¿Por qué se necesita una API para interactuar con un asistente creado en la plataforma de desarrolladores de Open AI?

Los asistentes creados en la plataforma de desarrolladores de Open AI solo se pueden interactuar a través de la API, lo que significa que es necesario escribir código para que el código pueda interactuar con el asistente. Esto permite una integración más profunda y personalizada en aplicaciones y páginas web.

¿Cómo se puede integrar un asistente de Open AI en una página web sin escribir código?

Se puede integrar un asistente de Open AI en una página web sin escribir código utilizando una herramienta como WordPress. Esta herramienta permite crear y diseñar un chatbot que se conecta con el asistente de Open AI a través de una plantilla predefinida que contiene el código necesario para la comunicación con la API del asistente.

¿Qué es WordPress y cómo se utiliza para construir agentes de inteligencia artificial?

WordPress es una herramienta para construir chatbots y, más recientemente, agentes de inteligencia artificial. Permite a los usuarios registrarse de forma gratuita y crear chatbots nuevos. A través de la interfaz de WordPress, se puede elegir una plantilla para empezar desde cero y diseñar el comportamiento del chatbot sin la necesidad de escribir código.

¿Cómo se conecta WordPress con un asistente de Open AI?

Para conectar WordPress con un asistente de Open AI, se debe generar una plantilla que contenga el código necesario para la comunicación con la API del asistente. Luego, se importa esta plantilla en WordPress desde un archivo y se configuran dos variables: una API key generada en la plataforma de desarrolladores de Open AI y el ID del asistente que se desea conectar.

¿Cómo se pueden configurar los estilos y la apariencia del chatbot en la página web?

Los estilos y la apariencia del chatbot se pueden configurar a través de la sección de integraciones en WordPress. Se proporciona una URL que contiene toda la información de la configuración visual del chatbot. Al hacer cambios en la apariencia, como colores, iconos, y textos, se genera una nueva URL que se pegará en la sección de integraciones para actualizar la apariencia del chatbot en la página web.

¿Cómo se integra el chatbot en la página web?

Para integrar el chatbot en la página web, se encuentra el código de integración en la pestaña de configuración de WordPress. Este código se pegará en la página web donde se desea que aparezca el chatbot. Dependiendo de la plataforma o herramienta utilizada para construir la web, el proceso de incrustación del código HTML puede variar.

¿Qué es la integración de webchat y cómo se relaciona con la integración de otros canales como WhatsApp o Instagram?

La integración de webchat es una de las formas más simples de integrar un asistente en una página web. Además de la webchat, la herramienta ofrece integración con múltiples canales, como WhatsApp, Instagram Messenger y Microsoft Teams. Aunque la integración de webchat es la más sencilla, la integración con otros canales generalmente requiere más pasos y puede ser algo más compleja.

¿Cómo se gestionan los costos asociados con el uso de un asistente de Open AI en la plataforma de desarrolladores?

Los costos asociados con el uso de un asistente de Open AI se gestionan en función de varios factores, como los tokens consumidos por el modelo, el uso de herramientas como code interpreter o retrieval, y la cantidad de documentos subidos por el asistente. La plataforma ofrece una página de precios donde se pueden ver los detalles de los costos y se pueden monitorizar los gastos en la sección de uso de la plataforma.

¿Cuáles son las consideraciones a tener en cuenta cuando se elige un modelo de GPT para el asistente?

Al elegir un modelo de GPT para el asistente, es importante considerar el costo asociado con el modelo, ya que los modelos más avanzados y con mayor capacidad de inteligencia, como el GPT 4 Turbo, son más caros. Es fundamental evaluar si el modelo seleccionado cumple con las necesidades del usuario y justifica el costo adicional en comparación con modelos anteriores.

¿Qué sucede si se sube un documento grande al asistente y se activa la herramienta de retrieval?

Si se sube un documento grande al asistente y se activa la herramienta de retrieval, el modelo puede consumir una gran cantidad de tokens para responder al usuario, ya que básicamente necesita traer casi todo el documento para generar la respuesta. Esto podría resultar en un costo significativo, especialmente si se trata de un modelo de GPT más caro como el GPT 4 Turbo.

Outlines

00:00

🤖 Integración de un asistente de AI en una página web

El primer párrafo aborda la pregunta de cómo integrar un asistente de inteligencia artificial en una página web. Se menciona la creación de una página en blanco y la integración de un asistente similar a GPT, que se ha creado desde la plataforma de desarrolladores de Open AI. Se destaca la facilidad de configuración y la posibilidad de compartir la URL del asistente con otros usuarios. Además, se explica que, a diferencia de los GPT, los asistentes se interactúan a través de una API y requieren de programación para su integración en una página web. Finalmente, se introduce la herramienta WordPress como una opción para integrar el asistente sin necesidad de escribir código.

05:02

📝 Configuración y conexión con la API de Open AI

El segundo párrafo se enfoca en la configuración del asistente y la conexión con la API de Open AI. Se describe el proceso de crear una 'Secret key' en la plataforma de desarrolladores de Open AI y la necesidad de conectar WordPress con la cuenta de Open AI para que el asistente funcione. Se mencionan los pasos para configurar las variables de configuración, como la 'Secret key' y el 'ID del asistente', y se sugiere probar la integración a través de un emulador antes de publicar los cambios. Además, se ofrece información sobre cómo configurar los estilos del chatbot y cómo integrarlo en la página web.

10:03

🎨 Personalización de estilos y integración en la página web

El tercer párrafo explica cómo personalizar los estilos del chatbot y cómo integrarlo en la página web. Se detalla el proceso de configuración de la URL del chatbot y la integración del código proporcionado en la página web utilizando un plugin como Elementor. Además, se discute la personalización de estilos, como el color del widget y la cabecera del chatbot, y la posibilidad de cambiar el icono del chatbot utilizando una URL de una imagen almacenada en Google Drive u otro servidor. Se menciona la obtención de una URL que contiene la información de la configuración de estilos y cómo aplicar estos cambios en la página web.

15:05

💰 Consideraciones sobre los costos y uso del asistente

El cuarto y último párrafo aborda los costos asociados con el uso del asistente y su integración en la página web. Se discute la estructura de precios de Open AI, que depende de factores como los tokens consumidos por el modelo, el uso de herramientas como 'code interpreter' y 'retrieval', y el tamaño de los documentos subidos por el asistente. Se advierte sobre el potencial costo si se suben documentos grandes y se recomienda monitorizar el uso del asistente para evitar costos inesperados. Finalmente, se invita a los espectadores a dejar comentarios en caso de tener dudas y se menciona la intención de abordar más temas en futuras publicaciones.

Keywords

💡Integración de GPT

La integración de GPT se refiere al proceso de incluir un modelo de inteligencia artificial desarrollado por OpenAI en una plataforma o aplicación. En el video, se discute cómo integrar un asistente GPT en una página web, lo que permite a los usuarios interactuar con él a través de la API.

💡API

API significa 'Interfaz de Programación de Aplicaciones'. Es un conjunto de rutinas y protocolos que permiten la comunicación entre aplicaciones. En el contexto del video, la API se utiliza para interactuar con el asistente GPT desde la página web.

💡Asistente personalizado

Un asistente personalizado es una instancia de inteligencia artificial diseñada para realizar tareas específicas según las instrucciones dadas por el usuario. En el video, se explica cómo crear y configurar un asistente personalizado a través de la plataforma de desarrolladores de OpenAI.

💡WordPress

WordPress es un sistema de gestión de contenidos y plataforma de creación de sitios web. En el video, se utiliza WordPress como herramienta para construir y personalizar un chatbot sin necesidad de escribir código.

💡Elementor

Elementor es un plugin de WordPress que permite a los usuarios crear y diseñar páginas web de manera visual sin necesidad de conocimientos de programación. Se menciona en el video como una opción para insertar el código del chatbot en una página web WordPress.

💡Webchat

Webchat es una función que permite a los usuarios comunicarse en tiempo real a través de una página web. En el video, se discute cómo integrar un webchat con un asistente GPT en una página web para mejorar la interacción con los visitantes.

💡Tokens

En el contexto de los modelos de inteligencia artificial, los tokens son unidades de información que representan palabras o frases. Se mencionan en el video al discutir los costos asociados con el uso del modelo GPT, ya que el precio puede depender del número de tokens que consuma una sesión.

💡Código CSS

CSS (Hoja de Estilo en Cascada) es un lenguaje de programación utilizado para definir y crear el diseño de un sitio web. En el video, se habla sobre cómo personalizar el estilo del chatbot a través de la edición de código CSS.

💡GPT Plus

GPT Plus es un servicio que permite a los usuarios crear asistentes GPT personalizados desde la web de Chat GPT. Aunque no se menciona directamente en el video, es un servicio relevante para la creación de asistentes GPT antes de integrarlos en una página web.

💡Chatbot

Un chatbot es un programa de computadora diseñado para simular una conversación con usuarios humanos a través de texto o voz. En el video, se muestra cómo crear y configurar un chatbot utilizando WordPress y la integración con un asistente GPT.

💡Integración con canales

Se refiere a la capacidad de un sistema de integrarse con diferentes plataformas o servicios para ampliar su funcionalidad. En el video, se menciona la posibilidad de integrar el asistente GPT con múltiples canales, como WhatsApp, Instagram Messenger y Microsoft Teams, aunque esto puede requerir más configuración que la integración webchat.

Highlights

Se puede integrar un GPT en una página web utilizando la plataforma de desarrolladores de Open AI.

Un GPT es un asistente personalizado fácil de configurar, pero solo se puede usar desde la web de Chat GPT.

Para integrar un GPT en una página web, se debe crear un asistente desde la plataforma de desarrolladores de Open AI.

Se puede elegir el modelo del asistente, incluyendo la opción del modelo GPT 4106 preview.

El asistente creado se puede integrar en una página web sin necesidad de escribir código额外的, utilizando herramientas como WordPress.

Wordpress.com ofrece una herramienta para construir agentes de inteligencia artificial, ideal para chatbots.

Se puede empezar desde cero o utilizar plantillas para diseñar el chatbot.

La integración del asistente en la página web se logra a través de la API, requiriendo conocimientos de programación.

Se puede generar una plantilla que contiene el código necesario para comunicarse con la API del asistente.

Es necesario configurar dos variables: la API key y el ID del asistente para conectar WordPress con la cuenta de Open AI.

La integración del chatbot en la página web se puede hacer copiando y pegando el código proporcionado por la herramienta.

Se pueden personalizar los estilos del chatbot a través de una URL de hoja de estilos.

Los cambios en la configuración de estilos se actualizan automáticamente en la página web después de guardar.

La herramienta de WordPress admite integración con múltiples canales, incluidos WhatsApp y Instagram Messenger.

El modelo de precios de la cuenta gratuita de WordPress cubre 1000 mensajes antes de comenzar a cobrar.

El coste de los asistentes creados desde la plataforma de desarrolladores de Open AI varía según el modelo y las herramientas utilizadas.

La página de precios de Open AI ofrece detalles sobre los costos asociados con el uso de diferentes modelos y herramientas.

Es importante monitorizar el uso y los costos, especialmente si se utilizan funciones avanzadas como el code interpreter o el retrieval.

La integración de un asistente personalizado en una página web puede mejorar significativamente la experiencia del usuario.

Transcripts

sin duda una de las preguntas que más me

han hecho esta última semana es Cómo se

puede integrar un gpt dentro de una

página web Pues bien aquí tenemos la

solución esto es una página en blanco

que he creado dentro de mi web

productomat fora de Open Ai si le digo

Hola pues veos que nos contesta nos dice

hola bienvenido a

productomat integrar el gpt dentro de

esta página web pues te lo explico en

este vídeo realmente lo que he integrado

mi web no es un gpt como tal pero es

algo muy muy parecido y igual de fácil

de crear vale recordemos que un gpt es

un asistente personalizado que podemos

crear desde la web de chat gpt siempre

que sea usuario de chat gpt Plus y lo

que caracteriza un gpt Es que es muy muy

muy sencillo de de configurar o de crear

aquí por ejemplo tengo algunos Y si

clico en este piteria crafit y me voy a

editarlo Pues realmente simplemente le

pones unas instrucciones le das acceso a

unos archivos le das acceso a unas

herramientas y ya está tienes tu gpt

personalizado bien pero lo que

caracteriza a este gpt además de su

facilidad para crearlo es también que

solo lo podemos utilizar desde la web de

chat gpt aquí tenemos la URL y si lo

hemos creado como un gpt público pues si

compartes esta URL con cualquier amigo

tuyo podrá utilizarlo también pero el

gpt no vamos a poder integrarlo en

ninguna página web ni ninguna aplicación

Si queremos hacer eso tenemos que crear

un asistente desde la plataforma de

desarrolladores de Open Ai que es lo que

he hecho yo para poder integrarlo en mi

página web y esto que puede que te

asuste realmente es igual de fácil que

crear un gpt Simplemente tienes que ir a

platform open.com Inicia sesión y en el

menú de la izquierda verás que en

segundo lugar tenemos los asistentes

Aquí tengo algunos creados y lo que

tienes que hacer es crear aquí un

asistente crear aquí un asistente

simplemente le damos al botón y aunque

la interfaz sea diferente lo que podemos

configurar es exactamente lo mismo mismo

que cuando creamos un gpt como ves Voy a

darle un poco de zoom por si no lo ves

bien Podemos ponerle un nombre al

asistente le damos unas instrucciones

elegimos aquí unos Tools y Bueno aquí sí

que podemos elegir el modelo que es algo

que en gpt o sea cuando creamos nuestro

gpt no podemos hacer pero bueno si

quieres que utilice el último modelo

pues utilizar escogerías el gpt 4106

preview eso es lo que he hecho al crear

este asistente que se llama producto

Manía Este es el asistente que he

integrado dentro de mi página web si

clicamos aquí pues en las instrucciones

es lo que le digo es eres el asistente

de la web de producto Manía compórtate

de tal manera vale un prom muy sencillo

en este caso es un asistente muy

sencillo Porque ni siquiera le he dado

acceso a ningún archivo y tampoco le ha

habilitado ninguna herramienta bien

hemos creado desde aquí el asistente y

has visto que es muy fácil crear un

asistente vas a tardar 5 segundos en

hacerlo pero Cómo podemos interactuar

con un asistente de estos Pues bien A

diferencia de los gpt los asistentes

solo se pueden interactuar con ellos a

través de la Api vale esto es una

plataforma desarrollador y todo lo que

creamos desde la plataforma de

desarrolladores Pues si lo queremos

utilizar hay que utilizar la la appin

vale es decir hay que escribir código

para que el código pueda interactuar con

el asistente Pero tranquilo porque en

nuestro caso lo que he hecho es utilizar

una herramienta que nos va a permitir

integrar ese asistente en nuestra página

web pero sin tener que escribir nada de

código esta de aquí es la herramienta se

llama wordpress puedes entrar a su web

en wordpress.com y Bueno aquí te

expliquen un poco de qué va el tema

básicamente Es una herramienta para

construir chatbots vale eso decían antes

Bueno ahora dicen que es una herramienta

para construir agentes de Inteligencia

artificial llámalo como quieras Es una

herramienta para construir lo que has

visto que tengo dentro de mi página web

Simplemente regístrate yo ya estoy

registrado no es necesario pagar nada no

es necesario vamos que te puedes

registrar de forma gratuita yo aquí

tengo una serie de chatbots a ti esto te

aparecerá vacío y lo que voy a hacer es

crear un chatbot nuevo vale le damos

aquí a create chatbot nos dice

congratulations hemos creado ya el

chatbot pero vamos a darle aquí a editar

y aquí nos deja elegir una plantilla

para para que no haya que empezar desde

cero bien en nuestro caso Vamos a darle

a Start from Scratch porque sí que

queremos empezar desde cero Vais a ver

por qué le damos aquí utilizar plantilla

y bien ya tenemos aquí pues el Canvas

donde vamos a poder diseñar nuestro

chatbot pero realmente no tenemos nada

que diseñar vale Esta es una herramienta

que antiguamente estaba pensada para que

tú aquí diseñará en los flujos de tu

chatbot Y cómo debía comportarse Pero

eso realmente lo va a hacer el asistente

de Open Ai lo único que hay que hacer es

conectar esta herramienta wordpress con

nuestro asistente y para ello lo que he

hecho es generar una plantilla Entonces

vamos a irnos aquí arriba arriba a la

izquierda del menú clicamos y vamos a

darle a import export y vamos a darle a

importar desde un archivo nos sale este

mensaje de Aquí vamos a darle que sí Y

entonces vamos a elegir el archivo lo he

seleccionado y ahora se estará subiendo

la plantilla vale el archivo lo voy a

poner en la descripción del en la

descripción del vídeo vale en la

descripción del vídeo voy a poner un

enlace para que puedas descargarte ese

archivo es un archivo que no pesa nada y

Simplemente tienes que hacer lo que he

hecho yo subirlo porque cuando lo subas

veremos que de repente en el Canvas pues

tenemos este módulo de aquí que se llama

standard 1 vale Este módulo de aquí

contiene pues una serie de elementos

dentro te voy a explicar brevemente qué

es lo que contiene pero realmente no es

ni siquiera necesario que lo entiendas

realmente estas pastillitas que hay aquí

son Trozos de código vale si clicado

aquí pues Abre aquí un trozo de código

en este caso pequeño pero si por ejemplo

vamos a cerrar si por ejemplo clico aquí

en la de la pastilla pues es un trozo de

código más grande básicamente Este es el

código necesario para poder comunicarse

con la Api del asistente vale es decir

la plantilla ya contiene el código

necesario para poder comunicarse con el

chat realmente lo único que tenemos que

configurar en esta plantilla son dos

cosas Tenemos que irnos aquí a settings

y debajo settings vemos que hay aquí dos

variables de configuración aquí tenemos

que meter estas dos variables para que

eh wordpress se conecte con nuestra

cuenta de Open Ai Vale entonces cómo

hacemos eso volvemos a la plataforma de

desarrolladores de Open Ai vamos a irnos

a apicis y aquí tenemos que crear una

Api yo ves que tengo bastantes creadas

Pero bueno tú si nunca has utilizado la

Api pues no tendrás ninguna entonces

simplemente le vamos a dar aquí a create

New Secret key y voy a darle aquí

botpress test puedes poner Cualquier

nombre realmente Esto no es relevante Y

entonces Esto me va a generar una apq

bastante larga simplemente la copio me

me voy al Bot y aquí en apq la pego vale

importante luego te explicaré el tema

precios pero cuando nos conectamos a

través de la apic con un asistente

creado des plataforma de desarrolladores

eso cuesta dinero vale por cada mensaje

que que queremos que nos envíe el

asistente pues vamos a tener que pagar

algo de dinero entonces Quizás te obliga

a meter la tarjeta de crédito para poder

generar esta piqui Aunque me parece al

menos antes cuando te registras por

primera vez creo que te que te daban

créditos 18 en crédito si has tenido

suerte pues igual tien ese crédito vale

la segunda variable que hay que meter es

el ID del asistente Y esto es muy fácil

Simplemente nos vamos a a los asistentes

clicamos en el asistente con el que

queremos conectar eh wordpress Por

ejemplo este de aquí y vemos aquí que

hay aquí un código debajo del nombre del

asistente pues lo copiamos nos damos a

wordpress lo pegamos ahí y ya está Vale

vamos a cerrar esto Vamos a darle a

publish por si acaso para que se

actualicen los cambios y vamos a probar

el ya está realmente es que no no hay

nada más que configurar podríamos

probarlo aquí en el emulador tienes aquí

una pantalla pues para poder probarlo

pero vamos a probarlo directamente

dándole a ser vale ya parece que lo ha

publicado le damos aquí a ser y Vais a

ver como ahora se debería abrir esto es

como el chatbot en modo test vale luego

vamos a configurar los colores y demás

pero aquí si le decimos

Hola pues esto ya debería funcionar

porque en principio ya está conectado

con nuestra cuenta de Open hola

bienvenido a producto Manía en qué puedo

ayudarte hoy veis tú si lo has conectado

con un asistente que en vez de saludarte

en vez de ser el asistente producto

Manía pues es un asistente para ayudarte

a hacerte la compra pues te habrá puesto

el mensaje que sea ya has visto lo

sencillo que ha sido conectarlo todo

entonces ahora lo que te voy a explicar

es por una parte Cómo configurar los

estilos y por otra parte cómo en bever

este asistente dentro de la página web

volvemos a estar dentro del editor de lo

que es el asistente y vamos a clicar

aquí en el menú y vamos a darle a volver

al dashboard vale esto nos va a llevar

al dashboard inicial donde podrás ver eh

bueno pues tu asistente que en principio

creo que le pone un nombre Random aquí

si quieres podemos cambiarle el nombre y

vamos a ponerle pues

asistente producto Manía o pm le damos

aquí a guardar Y entonces qué hay que

hacer para poder compartirlo o

integrarlo dentro de la web Pues si

vemos aquí en el menú de arriba vemos

que pone integrations clicamos allí y te

aparecerá esto de web chat vale Si no te

aparece esto de webchat Pues bueno voy a

borrarlo

webchat si no te aparece como no me

aparece ahora a mí simple ente le das

aquí al Hub y pues aquí buscas chatbot e

imagino que te aparecerá Ah no perdón

webchat pones webchat le das aquí le das

a instalar le das a ir al Bot y ya lo

tienes ahí Vale entonces aquí qué

podemos configurar el Bot name Bueno

podemos configurar una serie de cosas

pero antes de configurarla lo primero

que vamos a hacer es meterlo en la

página web integrarlo y una vez que lo

hayamos envido dentre la página web

luego volvemos a la configuración

entonces para integrarlo Simplemente nos

vamos aquí a la pestaña de de

configuración y lo que nos importa es

este código de aquí abajo esto aquí es

una URL que la URL si la pones en el

navegador pues vas a acceder

directamente a una página donde at

parecerá el chatbot vale En caso de que

quiera simplemente compartir la la URL

como no es el caso cogemos y copiamos

este código de aquí entonces este código

lo vamos a tener que pegar dentro de

nuestra página web yo en mi caso tengo

un wordpress estoy dentro del editor de

la página eh test y bueno utiliz un

plugin que se llama elementor que te

permite meter H html vale aquí buscas un

widget de html y lo metes aquí vale en

mi caso es este de aquí y simplemente he

pegado el código vale es decir tienes

que de alguna forma aquí va a depender

de la herramienta que utilices para

construir la web puedes meter dentro de

lo que es el body de la página en la que

quieres Que aparezca el chatbot pues

pegar ese código y una vez que lo pegues

pues ya verás comoo te aparecerá esta

bolita aquí abajo a la derecha Vale

entonces cómo editamos los estilos que

hay aquí pues bien vamos a volver a

wordpress estamos por aquí volvemos a

settings bien furando el Bot name el voy

a volver a este de aquí vale que es el

que está realmente integrado que es

integrations veis aquí tengo por ejemplo

Bot name producto Manía Bot description

Bienvenido a nuestra web pues

escribiendo aquí el texto vas a poder

configurar básicamente lo que está aquí

vale esto sería el nombre y esto de aquí

sería la descripción el resto de cosas

cómo se pueden configurar veis que pone

aquí stylesheet URL Pues bien si clica

allí te va a llevar a esta página de

aquí Entonces esta página lo que te

permite es es configurar Todos los

estilos a nivel visual y cuando le demos

aquí a obtener stylesheet URL esto nos

va a devolver una URL una URL que

contendrá toda la información de la

configuración que hemos hecho aquí

entonces esa URL cuando la generemos

tendemos que pegarla aquí vale en

concreto aquí ya hay una URL porque yo

he hecho la configuración del chatbot

que hay bebido en mi página web y por

ejemplo si esta URL la pegamos en el

navegador esto lo que contiene es un

código css con toda la configuración

entonces simplemente lo que tienes que

hacer es es te vas aquí y por ejemplo

pues que no quieres que sea morado o

Lila no el el color de la cabecera del

chatbot Pues clicas aquí y dices Yo

quiero que sea Rosa y aquí vas a ver

cómo se te debería actualizar Ah perdón

esto es esto es el widget esto es el

color del widget vale el color de widget

cuando está cerrado lo que es el header

pues está aquí vale Y si lo ponemos Pues

ahora amarillo pues se te pone amarillo

qué Puedes configurar pues Puedes

configurar los textos Puedes configurar

por ejemplo el icono que aparece aquí lo

Puedes configurar metiendo simplemente

aquí una URL de una imagen Es decir lo

que tienes que hacer es el icono de tu

web o el icono que quieres que tenga eh

tu asistente lo subes a un Google Drive

o lo subes a tu propio servidor y pegas

aquí la la URL obviamente pues puedes

cambiar Eh bueno básicamente Puedes

cambiar casi todas las cosas que ves y

si no te lo permite hacer esta página si

vas aquí a al styler avanzado pues

puedes directamente tocar el código css

para poder editarlo incluso más entonces

una vez que has hecho eso Simplemente te

das aquí a obtener la URL ves esta URL

que se genera aquí la copias vas aquí y

la pegas y una vez que la has pegado

vamos a ver

si una vez que la has pegado como se

habrá enviado la configuración te

aparece este botón de guardar

configuración le das aquí a guardar

configuración y ya está no tienes que

hacer nada en tu web vale es decir No

tienes que volver a pegar el código sino

que tú haces aquí los cambios V a

guardar y en tu página los cambios se

actualizan y ya está es que no tiene

mucho más como ves es muy sencillo

tanto lo que es crear el chatbot que al

final es importar la plantilla como lo

que es la configuración a nivel de

estilos es mega sencilla y qué es lo

bueno de esta herramienta que si te has

fijado cuando ha entrado aquí en el Hub

Nosotros hemos elegido una opción que es

la webchat pero es que esto tiene

integración con un montón de canales por

ejemplo WhatsApp por ejemplo

eh está por ahí Creo que Instagram

Messenger Microsoft teams Qué significa

esto significa que vas a poder el

asistente que has creado desde la

plataforma Open integrarlo con con todos

estos canales vale obviamente no va a

ser tan sencillo como la opción de

webchat la integración de webchat es la

integración más sencilla de todas pero

que sepas que se puede hacer de hecho

Bueno si clicas aquí en WhatsApp pues

aparte de tener que instalar tendrás que

irte a la documentación donde te explica

cómo hacer la integración y Bueno será

un poco más compleja seguramente hay más

pasos pero no se no es nada del otro

mundo hacerlo vale Así que esta

herramienta Es brutal en cuanto a

precios con la cuenta gratuita lo que te

cubren son 1000 mensajes vas a poder eh

digamos que el chat va a enviar 1000

mensajes de forma gratuita y después de

eso te empiezan a cobrar creo que es

medio céntimo por mensaje Vale creo que

está así el el modelo de pricing

hablando de pricing El pricing del del

asistente porque te he dicho que una de

las diferencias del asistente creado des

la plataforma desarrolladores respecto

al gpt Es que esto de aquí sí que tiene

un coste Cómo puedes saber cuánto te

cuesta Bueno hay una página de pricing

quea te enseño pero si vas aquí dentro

de la plataforma a uso aquí vas a tener

gráficas donde te va vas a poder ir

viendo pues lo que te va costando en las

llamadas al asistente vale aquí si no

subes ningún archivo realmente no te va

a costar mucho dinero el problema es si

subes algún archivo al asistente si

utilizas la tool de retrieval y le subes

un PDF muy grande puede que el lo que es

el asistente consuma demasiados tokens Y

entonces sí que te salga un poco caro

vale Pero bueno lo que te recomiendo Es

que crees el asistente que lo integres

en tu web y vayas monitorizando el el

uso el tema del coste quizás debas

preocuparte un poco más adelante voy a

buscar la página de pricing y te lo

comento vale Esta es la página de

pricing fácil de encontrar open.com bar

pricing y por una parte te explican los

costes que tienen los modelos vale

porque tú al crear el asistente vas a

tener que pagar en función de diferentes

conceptos primero vas a tener que pagar

en función de los tokens que consuma el

modelo que has conectado al asistente si

recuerdas cuando creamos el asistente

elegimos un modelo Pues en función del

modelo que cojas vas a tener que pagar

más o menos por ejemplo el gpt 4 Turbo

que es el último de todos te cuesta un

céntimo por cada 1000 tokens vale los

tokens van acorde digamos a a la

longitud de los mensajes a la longitud

del del prom del mensaje que escriba el

usuario y cuesta un céntimo si eliges el

modelo 3.5 turo es mucho más barato vale

cuesta una décima parte por eso es

importante Pues saber si de verdad tu

existente necesita tener la inteligencia

del modelo 4 porque el modelo 4 es 10

veces más caro que el tres Entonces vas

a tener que pagar en función de eso pero

luego también si por ejemplo utilizas la

herramienta de code interpreter por cada

sesión que uces el cod interpreter pagas

3 céntimos Qué es una sesión pues una

sesión es una ventana temporal de una

hora vale es decir que bueno pagas 3

céntimos por hora en caso de que estés

todo rato utilizando el cod interpreter

Y luego el retrieval pues pagas en

función de la cantidad de archivos o

documentos que ha ha subido el asistente

un máximo puede subir el asistente un

máximo de 20 documentos de 500 megas

cada uno es decir que eso son pues 10 GB

entonces pagarías en función de los

gigas que has subido Pues si sube 10 GB

pues 20 céntimos por 10 GB serían 2 y

eso es diario es decir por cada día que

estén los documentos subidos ahí pues

pagas esa cantidad pero realmente donde

se te va a ir el dinero no es aquí eh

donde se te va a ir el dinero es en el

modelo por lo que te he dicho antes eh

si no has explorado todavía el tema de

asistentes quizás no es fácil de

entender pero si subes un documento y

tienes activado el retrieval el modelo

va a consumir muchísimos tokens porque

básicamente para responder al usuario va

a traerse casi el documento entero Y eso

pues claro igual en una petición te va a

consumir Imagínate 20.000 tokens si el

modelo gbt 4 Turbo te cuesta un céntimo

por cada 1000 tokens pues 10,000 tokens

van a ser 10 céntimos Qué dices ostras

pues Tampoco es tanto hombre pues si un

usuario te manda cinco o seis mensajes

eh Y tienes muchos usuarios pues se te

puede ir un poco de las manos vale Así

que nada espero que haya sido resultado

interesante desde luego como decía al

principio del vídeo lo que más me estaba

preguntando la gente es cómo integrarlo

en una página web y has visto lo fácil

que es así que espero tus comentarios si

tienes cualquier duda pónmelo en

comentarios que intentaré responder a

todos y nada nos vemos en próximos

vídeos