From eceb170df03721dca4183b658c863b94fa04bc84 Mon Sep 17 00:00:00 2001
From: cheveguerra <cheveguerra@gmail.com>
Date: Wed, 11 Jan 2023 10:36:18 -0600
Subject: [PATCH] feat: mod de starters para habiltar portal

Modificacion de starters para habiltar el portal para el QR
---
 starters/apps/base-baileys-json/app.js        |  64 +++++++---
 starters/apps/base-baileys-memory/app.js      |  64 +++++++---
 starters/apps/base-baileys-mongo/app.js       | 108 +++++++++--------
 starters/apps/base-baileys-mysql/app.js       | 108 +++++++++--------
 .../apps/base-baileys-mysql/public/index.html |  80 -------------
 .../apps/base-baileys-mysql/server.http.js    |  34 ------
 starters/apps/base-meta-json/app.js           | 104 +++++++++--------
 starters/apps/base-meta-memory/app.js         | 104 +++++++++--------
 starters/apps/base-meta-mongo/app.js          | 104 +++++++++--------
 starters/apps/base-meta-mysql/app.js          | 104 +++++++++--------
 starters/apps/base-twilio-json/app.js         | 104 +++++++++--------
 starters/apps/base-twilio-memory/app.js       | 104 +++++++++--------
 starters/apps/base-twilio-mongo/app.js        | 104 +++++++++--------
 starters/apps/base-twilio-mysql/app.js        | 104 +++++++++--------
 starters/apps/base-venom-json/app.js          | 108 +++++++++--------
 .../apps/base-venom-json/public/index.html    |  80 -------------
 starters/apps/base-venom-json/server.http.js  |  34 ------
 starters/apps/base-venom-memory/app.js        | 108 +++++++++--------
 .../apps/base-venom-memory/public/index.html  |  80 -------------
 .../apps/base-venom-memory/server.http.js     |  34 ------
 starters/apps/base-venom-mongo/app.js         | 108 +++++++++--------
 .../apps/base-venom-mongo/public/index.html   |  80 -------------
 starters/apps/base-venom-mongo/server.http.js |  34 ------
 starters/apps/base-venom-mysql/app.js         | 108 +++++++++--------
 .../apps/base-venom-mysql/public/index.html   |  80 -------------
 starters/apps/base-venom-mysql/server.http.js |  34 ------
 starters/apps/base-wweb-json/app.js           | 108 +++++++++--------
 .../apps/base-wweb-json/public/index.html     |  80 -------------
 starters/apps/base-wweb-json/server.http.js   |  34 ------
 starters/apps/base-wweb-memory/app.js         | 108 +++++++++--------
 .../apps/base-wweb-memory/public/index.html   |  80 -------------
 starters/apps/base-wweb-memory/server.http.js |  34 ------
 starters/apps/base-wweb-mongo/app.js          | 109 ++++++++++--------
 .../apps/base-wweb-mongo/public/index.html    |  80 -------------
 starters/apps/base-wweb-mongo/server.http.js  |  34 ------
 starters/apps/base-wweb-mysql/app.js          | 108 +++++++++--------
 .../apps/base-wweb-mysql/public/index.html    |  80 -------------
 starters/apps/base-wweb-mysql/server.http.js  |  34 ------
 38 files changed, 1174 insertions(+), 1893 deletions(-)
 delete mode 100644 starters/apps/base-baileys-mysql/public/index.html
 delete mode 100644 starters/apps/base-baileys-mysql/server.http.js
 delete mode 100644 starters/apps/base-venom-json/public/index.html
 delete mode 100644 starters/apps/base-venom-json/server.http.js
 delete mode 100644 starters/apps/base-venom-memory/public/index.html
 delete mode 100644 starters/apps/base-venom-memory/server.http.js
 delete mode 100644 starters/apps/base-venom-mongo/public/index.html
 delete mode 100644 starters/apps/base-venom-mongo/server.http.js
 delete mode 100644 starters/apps/base-venom-mysql/public/index.html
 delete mode 100644 starters/apps/base-venom-mysql/server.http.js
 delete mode 100644 starters/apps/base-wweb-json/public/index.html
 delete mode 100644 starters/apps/base-wweb-json/server.http.js
 delete mode 100644 starters/apps/base-wweb-memory/public/index.html
 delete mode 100644 starters/apps/base-wweb-memory/server.http.js
 delete mode 100644 starters/apps/base-wweb-mongo/public/index.html
 delete mode 100644 starters/apps/base-wweb-mongo/server.http.js
 delete mode 100644 starters/apps/base-wweb-mysql/public/index.html
 delete mode 100644 starters/apps/base-wweb-mysql/server.http.js

diff --git a/starters/apps/base-baileys-json/app.js b/starters/apps/base-baileys-json/app.js
index 67d4be6..b06887c 100644
--- a/starters/apps/base-baileys-json/app.js
+++ b/starters/apps/base-baileys-json/app.js
@@ -9,31 +9,59 @@ const QRPortalWeb = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')
 
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
+
 const flowDocs = addKeyword([
     'doc',
     'documentacion',
     'documentación',
-]).addAnswer([
-    '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
-    'https://bot-whatsapp.netlify.app/',
-])
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer([
-    '🙌 Aquí encontras un ejemplo rapido',
-    'https://bot-whatsapp.netlify.app/docs/example/',
-])
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowGracias = addKeyword(['gracias', 'grac']).addAnswer([
-    '🚀 Puedes aportar tu granito de arena a este proyecto',
-    '[*opencollective*] https://opencollective.com/bot-whatsapp',
-    '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
-    '[*patreon*] https://www.patreon.com/leifermendez',
-])
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowDiscord = addKeyword(['discord']).addAnswer([
-    '🤪 Únete al discord',
-    'https://link.codigoencasa.com/DISCORD',
-])
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
     .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
diff --git a/starters/apps/base-baileys-memory/app.js b/starters/apps/base-baileys-memory/app.js
index a8fbd00..3d05e79 100644
--- a/starters/apps/base-baileys-memory/app.js
+++ b/starters/apps/base-baileys-memory/app.js
@@ -9,31 +9,59 @@ const QRPortalWeb = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MockAdapter = require('@bot-whatsapp/database/mock')
 
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
+
 const flowDocs = addKeyword([
     'doc',
     'documentacion',
     'documentación',
-]).addAnswer([
-    '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
-    'https://bot-whatsapp.netlify.app/',
-])
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer([
-    '🙌 Aquí encontras un ejemplo rapido',
-    'https://bot-whatsapp.netlify.app/docs/example/',
-])
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowGracias = addKeyword(['gracias', 'grac']).addAnswer([
-    '🚀 Puedes aportar tu granito de arena a este proyecto',
-    '[*opencollective*] https://opencollective.com/bot-whatsapp',
-    '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
-    '[*patreon*] https://www.patreon.com/leifermendez',
-])
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowDiscord = addKeyword(['discord']).addAnswer([
-    '🤪 Únete al discord',
-    'https://link.codigoencasa.com/DISCORD',
-])
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
     .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
diff --git a/starters/apps/base-baileys-mongo/app.js b/starters/apps/base-baileys-mongo/app.js
index 277115d..253d1fa 100644
--- a/starters/apps/base-baileys-mongo/app.js
+++ b/starters/apps/base-baileys-mongo/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')
 
@@ -29,58 +28,72 @@ const MONGO_DB_NAME = 'db_bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -95,6 +108,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-baileys-mysql/app.js b/starters/apps/base-baileys-mysql/app.js
index 02a13c0..3dc800b 100644
--- a/starters/apps/base-baileys-mysql/app.js
+++ b/starters/apps/base-baileys-mysql/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const BaileysProvider = require('@bot-whatsapp/provider/baileys')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')
 
@@ -30,58 +29,72 @@ const MYSQL_DB_NAME = 'bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -98,6 +111,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-baileys-mysql/public/index.html b/starters/apps/base-baileys-mysql/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-baileys-mysql/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-baileys-mysql/server.http.js b/starters/apps/base-baileys-mysql/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-baileys-mysql/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-meta-json/app.js b/starters/apps/base-meta-json/app.js
index 49dd430..cc4c7ac 100644
--- a/starters/apps/base-meta-json/app.js
+++ b/starters/apps/base-meta-json/app.js
@@ -20,58 +20,72 @@ const JsonFileAdapter = require('@bot-whatsapp/database/json')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-meta-memory/app.js b/starters/apps/base-meta-memory/app.js
index 288929c..c8201e8 100644
--- a/starters/apps/base-meta-memory/app.js
+++ b/starters/apps/base-meta-memory/app.js
@@ -20,58 +20,72 @@ const MockAdapter = require('@bot-whatsapp/database/mock')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-meta-mongo/app.js b/starters/apps/base-meta-mongo/app.js
index f40a6a2..18cd9ac 100644
--- a/starters/apps/base-meta-mongo/app.js
+++ b/starters/apps/base-meta-mongo/app.js
@@ -27,58 +27,72 @@ const MONGO_DB_NAME = 'db_bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-meta-mysql/app.js b/starters/apps/base-meta-mysql/app.js
index 25b171c..102f977 100644
--- a/starters/apps/base-meta-mysql/app.js
+++ b/starters/apps/base-meta-mysql/app.js
@@ -28,58 +28,72 @@ const MYSQL_DB_NAME = 'bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-twilio-json/app.js b/starters/apps/base-twilio-json/app.js
index 190e842..047a126 100644
--- a/starters/apps/base-twilio-json/app.js
+++ b/starters/apps/base-twilio-json/app.js
@@ -20,58 +20,72 @@ const JsonFileAdapter = require('@bot-whatsapp/database/json')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-twilio-memory/app.js b/starters/apps/base-twilio-memory/app.js
index 9730709..cc1d16b 100644
--- a/starters/apps/base-twilio-memory/app.js
+++ b/starters/apps/base-twilio-memory/app.js
@@ -20,58 +20,72 @@ const MockAdapter = require('@bot-whatsapp/database/mock')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-twilio-mongo/app.js b/starters/apps/base-twilio-mongo/app.js
index 9e5e3f7..dcabb99 100644
--- a/starters/apps/base-twilio-mongo/app.js
+++ b/starters/apps/base-twilio-mongo/app.js
@@ -27,58 +27,72 @@ const MONGO_DB_NAME = 'db_bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-twilio-mysql/app.js b/starters/apps/base-twilio-mysql/app.js
index 7100f9c..4725cd3 100644
--- a/starters/apps/base-twilio-mysql/app.js
+++ b/starters/apps/base-twilio-mysql/app.js
@@ -29,58 +29,72 @@ const MYSQL_DB_NAME = 'bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
diff --git a/starters/apps/base-venom-json/app.js b/starters/apps/base-venom-json/app.js
index c742f78..c399b5e 100644
--- a/starters/apps/base-venom-json/app.js
+++ b/starters/apps/base-venom-json/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')
 
@@ -22,58 +21,72 @@ const JsonFileAdapter = require('@bot-whatsapp/database/json')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -85,6 +98,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-venom-json/public/index.html b/starters/apps/base-venom-json/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-venom-json/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-venom-json/server.http.js b/starters/apps/base-venom-json/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-venom-json/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-venom-memory/app.js b/starters/apps/base-venom-memory/app.js
index 6f89ef2..c539f36 100644
--- a/starters/apps/base-venom-memory/app.js
+++ b/starters/apps/base-venom-memory/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const MockAdapter = require('@bot-whatsapp/database/mock')
 
@@ -22,58 +21,72 @@ const MockAdapter = require('@bot-whatsapp/database/mock')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -85,6 +98,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-venom-memory/public/index.html b/starters/apps/base-venom-memory/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-venom-memory/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-venom-memory/server.http.js b/starters/apps/base-venom-memory/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-venom-memory/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-venom-mongo/app.js b/starters/apps/base-venom-mongo/app.js
index d8de982..bae23f8 100644
--- a/starters/apps/base-venom-mongo/app.js
+++ b/starters/apps/base-venom-mongo/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')
 
@@ -29,58 +28,72 @@ const MONGO_DB_NAME = 'db_bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -95,6 +108,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-venom-mongo/public/index.html b/starters/apps/base-venom-mongo/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-venom-mongo/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-venom-mongo/server.http.js b/starters/apps/base-venom-mongo/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-venom-mongo/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-venom-mysql/app.js b/starters/apps/base-venom-mysql/app.js
index 24da8ee..737dc99 100644
--- a/starters/apps/base-venom-mysql/app.js
+++ b/starters/apps/base-venom-mysql/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const VenomProvider = require('@bot-whatsapp/provider/venom')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')
 
@@ -31,58 +30,72 @@ const MYSQL_DB_NAME = 'bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -99,6 +112,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-venom-mysql/public/index.html b/starters/apps/base-venom-mysql/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-venom-mysql/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-venom-mysql/server.http.js b/starters/apps/base-venom-mysql/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-venom-mysql/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-wweb-json/app.js b/starters/apps/base-wweb-json/app.js
index 31f03dd..3144bd0 100644
--- a/starters/apps/base-wweb-json/app.js
+++ b/starters/apps/base-wweb-json/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const JsonFileAdapter = require('@bot-whatsapp/database/json')
 
@@ -22,58 +21,72 @@ const JsonFileAdapter = require('@bot-whatsapp/database/json')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -85,6 +98,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-wweb-json/public/index.html b/starters/apps/base-wweb-json/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-wweb-json/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-wweb-json/server.http.js b/starters/apps/base-wweb-json/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-wweb-json/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-wweb-memory/app.js b/starters/apps/base-wweb-memory/app.js
index 5318283..29eb0bc 100644
--- a/starters/apps/base-wweb-memory/app.js
+++ b/starters/apps/base-wweb-memory/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const MockAdapter = require('@bot-whatsapp/database/mock')
 
@@ -22,58 +21,72 @@ const MockAdapter = require('@bot-whatsapp/database/mock')
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -85,6 +98,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-wweb-memory/public/index.html b/starters/apps/base-wweb-memory/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-wweb-memory/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-wweb-memory/server.http.js b/starters/apps/base-wweb-memory/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-wweb-memory/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-wweb-mongo/app.js b/starters/apps/base-wweb-mongo/app.js
index 34f3887..43eed81 100644
--- a/starters/apps/base-wweb-mongo/app.js
+++ b/starters/apps/base-wweb-mongo/app.js
@@ -4,12 +4,10 @@ const {
     createFlow,
     addKeyword,
 } = require('@bot-whatsapp/bot')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const MongoAdapter = require('@bot-whatsapp/database/mongo')
 
-require('./server.http')
-
 /**
  * Declaramos las conexiones de Mongo
  */
@@ -29,58 +27,72 @@ const MONGO_DB_NAME = 'db_bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -95,6 +107,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-wweb-mongo/public/index.html b/starters/apps/base-wweb-mongo/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-wweb-mongo/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-wweb-mongo/server.http.js b/starters/apps/base-wweb-mongo/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-wweb-mongo/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))
diff --git a/starters/apps/base-wweb-mysql/app.js b/starters/apps/base-wweb-mysql/app.js
index 2095842..2b31f4a 100644
--- a/starters/apps/base-wweb-mysql/app.js
+++ b/starters/apps/base-wweb-mysql/app.js
@@ -5,8 +5,7 @@ const {
     addKeyword,
 } = require('@bot-whatsapp/bot')
 
-require('./server.http')
-
+const QRPortal = require('@bot-whatsapp/portal')
 const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
 const MySQLAdapter = require('@bot-whatsapp/database/mysql')
 
@@ -31,58 +30,72 @@ const MYSQL_DB_NAME = 'bot'
  * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
  */
 
-const flowBolsos2 = addKeyword(['bolsos2', '2'])
-    .addAnswer('🤯 *MUCHOS* bolsos ...')
-    .addAnswer('y mas bolsos... bla bla')
+const flowSecundario = addKeyword(['2', 'siguiente']).addAnswer([
+    '📄 Aquí tenemos el flujo secundario',
+])
 
-const flowZapatos2 = addKeyword(['zapatos2', '2'])
-    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
-    .addAnswer('y algunas otras cosas.')
+const flowDocs = addKeyword([
+    'doc',
+    'documentacion',
+    'documentación',
+]).addAnswer(
+    [
+        '📄 Aquí encontras las documentación recuerda que puedes mejorarla',
+        'https://bot-whatsapp.netlify.app/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
-    .addAnswer('🤯 Veo que elegiste zapatos')
-    .addAnswer('Tengo muchos zapatos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowZapatos2]
-    )
+const flowTuto = addKeyword(['tutorial', 'tuto']).addAnswer(
+    [
+        '🙌 Aquí encontras un ejemplo rapido',
+        'https://bot-whatsapp.netlify.app/docs/example/',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
-    .addAnswer('🙌 Veo que elegiste bolsos')
-    .addAnswer('Tengo muchos bolsos...bla bla')
-    .addAnswer(
-        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos2]
-    )
+const flowGracias = addKeyword(['gracias', 'grac']).addAnswer(
+    [
+        '🚀 Puedes aportar tu granito de arena a este proyecto',
+        '[*opencollective*] https://opencollective.com/bot-whatsapp',
+        '[*buymeacoffee*] https://www.buymeacoffee.com/leifermendez',
+        '[*patreon*] https://www.patreon.com/leifermendez',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
-/**
- * Declarando flujo principal
- */
+const flowDiscord = addKeyword(['discord']).addAnswer(
+    [
+        '🤪 Únete al discord',
+        'https://link.codigoencasa.com/DISCORD',
+        '\n*2* Para siguiente paso.',
+    ],
+    null,
+    null,
+    [flowSecundario]
+)
 
 const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
-    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
-    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer('🙌 Hola bienvenido a este *Chatbot*')
     .addAnswer(
-        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
-        { capture: true },
-        (ctx) => {
-            console.log('Aqui puedes ver más info del usuario...')
-            console.log('Puedes enviar un mail, hook, etc..')
-            console.log(ctx)
-        },
-        [flowBolsos, flowZapatos]
+        [
+            'te comparto los siguientes links de interes sobre el proyecto',
+            '👉 *doc* para ver la documentación',
+            '👉 *gracias*  para ver la lista de videos',
+            '👉 *discord* unirte al discord',
+        ],
+        null,
+        null,
+        [flowDocs, flowGracias, flowTuto, flowDiscord]
     )
 
 const main = async () => {
@@ -99,6 +112,7 @@ const main = async () => {
         provider: adapterProvider,
         database: adapterDB,
     })
+    QRPortalWeb()
 }
 
 main()
diff --git a/starters/apps/base-wweb-mysql/public/index.html b/starters/apps/base-wweb-mysql/public/index.html
deleted file mode 100644
index 202b50c..0000000
--- a/starters/apps/base-wweb-mysql/public/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <title>🤖 Crear chatbot WhatsApp en minutos</title>
-        <style>
-            html,
-            body {
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-                justify-content: center;
-                align-self: center;
-                align-items: center;
-                font-family: 'Inter', sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <div
-            style="
-                display: flex;
-                gap: 2rem;
-                justify-content: center;
-                align-items: center;
-            "
-        >
-            <img
-                style="
-                    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-                        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-                    border-radius: 15px;
-                    object-fit: contain;
-                "
-                width="400"
-                height="400"
-                src="qr.png"
-                alt="Escanear QR"
-            />
-            <div style="width: 400px; display: grid; gap: 1rem">
-                <h1 style="margin: 0">Whatsapp QR</h1>
-                <p>
-                    <strong
-                        >F5 para actualizar, el codigo se actualiza cada minuto. </strong
-                    ><br />
-                    Con esta libreria, puedes configurar respuestas
-                    automatizadas para preguntas frecuentes , recibir y
-                    responder mensajes de manera automatizada, y hacer un
-                    seguimiento de las interacciones con los clientes. Además,
-                    nuestro Chatbot se integra fácilmente con otros sistemas y
-                    herramientas que ya esté utilizando en su negocio.
-                </p>
-                <div>
-                    <a
-                        target="_blank"
-                        style="
-                            background: white;
-                            box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
-                                rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-                            padding: 10px;
-                            border-radius: 5px;
-                            font-weight: 600;
-                            text-decoration: none;
-                            color: #1a1a1a;
-                            border: solid 1px #afafaf;
-                        "
-                        href="https://bot-whatsapp.netlify.app/"
-                        >Ver documentación</a
-                    >
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/starters/apps/base-wweb-mysql/server.http.js b/starters/apps/base-wweb-mysql/server.http.js
deleted file mode 100644
index 217bd71..0000000
--- a/starters/apps/base-wweb-mysql/server.http.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const http = require('http')
-const fs = require('fs')
-const path = require('path')
-
-const PORT = process.env.PORT || 3000
-
-/**
- * Levantar un HTTP Server
- */
-http.createServer(function (req, res) {
-    var cssPath = undefined
-    var fileStream = undefined
-    var imagePath = undefined
-
-    if (req.url === '/') {
-        fs.readFile('./public/index.html', 'UTF-8', function (err, html) {
-            res.writeHead(200, { 'Content-Type': 'text/html' })
-            res.end(html)
-        })
-    } else if (req.url.match('.css$')) {
-        cssPath = path.join(__dirname, 'public', req.url)
-        fileStream = fs.createReadStream(cssPath, 'UTF-8')
-        res.writeHead(200, { 'Content-Type': 'text/css' })
-        fileStream.pipe(res)
-    } else if (req.url.match('.png$')) {
-        imagePath = path.join(__dirname, req.url)
-        fileStream = fs.createReadStream(imagePath)
-        res.writeHead(200, { 'Content-Type': 'image/png' })
-        fileStream.pipe(res)
-    } else {
-        res.writeHead(404, { 'Content-Type': 'text/html' })
-        res.end('No Page Found')
-    }
-}).listen(PORT, () => console.log(`Escanear QR Code http://localhost:${PORT}`))