Versiones comparadas

Versión anterior 2

changes.mady.by.user Laura Ortiz

Guardado el

comparado con

Nueva versión Actual

changes.mady.by.user Laura Ortiz

Guardado el

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

Con Sagicc podrás capturar de 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 identificador único del canal, es generado por Sagicc 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.

Image Added

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="https://sagicctest.sagicc.co/apiv1'.env('APP_URL').'/api/v2/canal-website/website-callback" method="post"  enctype="multipart/form-data" style="font-family: Arial;"><input>
  <input type="hidden" id="sagicc_token" name="sagicc_token"
    value="59c1962f4dab4014b20c737be0dd807f">" 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>

Cambiar historial