Cómo EMBEBER UN GPT en una página WEB [Tutorial paso a paso]
Summary
TLDREl 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
🤖 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.
📝 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.
🎨 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.
💰 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.
Mindmap
Keywords
💡Integración de GPT
💡API
💡Asistente personalizado
💡WordPress
💡Elementor
💡Webchat
💡Tokens
💡Código CSS
💡GPT Plus
💡Chatbot
💡Integración con canales
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
Crear GPTs - Respondo a las preguntas más frecuentes
Cómo construir un ASISTENTE de IA en WHATSAPP para automatizar la gestión de reservas
GPT ACTIONS // Cómo editar el SCHEMA [Tutorial completo]
Construyo un ASISTENTE AUTÓNOMO que me envía REPORTES de VENTAS por EMAIL
Cómo añadir ACCIONES a un GPT para darle SUPERPODERES 🦸🏻♂️
Presentado Copilot Studio de Microsoft. Crea y Personaliza tu Propio Agente Digital
5.0 / 5 (0 votes)