...
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: 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.
| Info |
|---|
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. |
| Bloque de código |
|---|
<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> |
...