Con Sagicc podrás capturar información, leads, solicitudes, mensajes, PQRSF, etc., por medio de formularios incrustados en la página web de tu empresa. Para poner en funcionamiento un canal de tipo Website, es necesario tener acceso al CMS (Wordpress, Wix, Shopify, Magento, etc.) sobre el cual funciona la página web, al servidor o al código fuente de la misma.
La información requerida para la configuración de un canal de tipo Website es la siguiente:
Token: Es un token o llave de seguridad generada automáticamente por Sagicc. Funciona como identificador del canal y no es posible editarlo.
Dominio Autorizado: Permite especificar el dominio o URL de la página en la cual será incrustado el formulario a conectar con Sagicc. De esta forma, Sagicc sólo permitirá la captura de información desde este dominio autorizado.
URL para redirección: Es la URL de la página a la cuál será redireccionado el cliente una vez digite la información del formulario y hace clic en Enviar. En caso de no especificar una URL para redirección, se mostrará un mensaje básico informando el envío exitoso del formulario.
Plantilla de Formulario: Es una plantilla de ejemplo para incrustar un formulario en la página web de tu empresa. Es código HTML puro que podrás agregar en el código fuente de tu página web en caso de no contar con un formulario, y modificarlo para que se ajuste a tus requerimientos. En caso de que ya cuentes con un formulario, puedes modificarlo y apuntarlo a la URL que se muestras en la plantilla.
Copia y pega esta plantilla en el código fuente de la página web de tu empresa y adáptala a los requerimientos de tu negocio. Puedes aplicar estilos CSS para modificar la apariencia de los elementos, o agregar código HTML o Javascript adicional. Para realizar estos cambios asesórate de una persona con conocimientos básicos en programación.
<form id="sagicc-form-captcha" action="'.env('APP_URL').'/api/v2/canal-website/website-callback" method="post" enctype="multipart/form-data" style="font-family: Arial;">
<input type="hidden" id="sagicc_token" name="sagicc_token" value="2b406a62f1dad21cd0ebcf25e08e6f92">
<div style="margin-bottom: 15px;">
<label for="nombre" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Nombre:</label>
<input type="text" id="nombre" name="nombre" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;" />
</div>
<div style="margin-bottom: 15px;">
<label for="apellido" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Apellido:</label>
<input type="text" id="apellido" name="apellido" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="email" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Correo Electrónico:</label>
<input type="email" id="email" name="email" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="telefono" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Teléfono:</label>
<input type="text" id="telefono" name="telefono" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="mensaje" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="4" required style="display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;"></textarea>
</div>
<div style="margin-bottom: 15px;">
<label for="file" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Adjunto:</label>
<input type="file" id="files[]" name="files[]" style="display: block; width: 100%;">
</div>
<div style="max-width: 100%;">
<div style="display: flex; flex-direction: column; justify-content: center;">
<p style="margin: 6px 0px; color: #ee7e6a;" id="sagicc-status"></p>
</div>
<div style="margin-bottom: 10px; display: flex;">
<input type="text" id="sagicc-text-captcha" readonly style="text-decoration: line-through; font-weight: bold; text-align: center; font-size: 22px; background-color: #ccc; border-radius: 4px; border: 1px solid #ccc; padding: 6px; outline: none; color: #1d1d1d;">
<button type="button" id="sagicc-btn-generate" style="padding: 4px 8px; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc;">Refrescar</button>
</div>
<div style="margin-bottom: 10px; display: flex; flex-direction: column;">
<small style="margin-bottom: 10px;"><b>Digite los caracteres de la imagen de arriba</b></small>
<input type="text" id="sagicc-int-captcha" placeholder="Enter the captcha.." style="border: 2px solid #ccc; outline: none; border-radius: 6px; padding: 6px; font-size: 16px; font-weight: bold; text-decoration: none;color: #555;width: 50%;">
</div>
</div>
<button type="submit" id="sagicc-btn-submit" style="display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc;">Enviar</button>
<script type="text/javascript" src="https://static.sagicc.co/webform/v2/static/js/sagicc-webform.js"></script>
</form>
| Versión | Fecha | Comentarios |
|---|---|---|
| Versión actual (v. 6) | dic 29, 2022 20:58 | Laura Ortiz |
| v. 7 | mar 01, 2023 15:37 | Laura Ortiz |
| v. 6 | dic 29, 2022 20:58 | Laura Ortiz |
| v. 5 | sept 14, 2022 21:07 | Laura Ortiz |
| v. 4 | sept 13, 2022 20:54 | Laura Ortiz |
| v. 3 | abr 25, 2022 17:01 | Laura Ortiz |
| v. 2 | abr 25, 2022 16:57 | Laura Ortiz |
| v. 1 | abr 23, 2022 15:31 | Laura Ortiz |