Instalar en Webflow

Webflow tiene dos lugares para código que funcionan con las encuestas de Voxtrics: Custom code en la configuración del sitio para un formulario emergente, un emergente sin botón o un chat en todas las páginas, y el elemento Code Embed para un formulario en línea colocado en una página. Webflow solo permite código propio con un plan de pago: un plan de sitio o un plan de espacio de trabajo Core, Growth, Agency o Freelancer.

Los nombres de los menús de abajo son los de la interfaz de Webflow en inglés.

Antes de empezar

  1. En Dominios, añade el dominio en el que está publicado tu sitio de Webflow, por ejemplo example.com, o su dirección de Webflow como your-site.webflow.io. Una encuesta solo se carga en el dominio al que pertenece.
  2. Crea la encuesta en ese dominio y publícala.
  3. Copia el ID de la encuesta: en la lista de Encuestas, abre el código de inserción de la encuesta. El ID es el valor de formId.

Emergente, emergente sin botón o chat: Custom code

  1. En el panel de Webflow, abre la configuración del sitio y elige Custom code en el menú de la izquierda.

  2. En Footer code, pega esto, con el ID de tu encuesta en lugar de YOUR_SURVEY_ID:

    <script src="https://feedback.voxtrics.io/assets/prod/index.iife.js"></script>
    <script>
      window.SiteUtilsFeedback.initiateFeedbackModule({ formId: 'YOUR_SURVEY_ID' });
    </script>
    

    El código de Footer code se ejecuta al final de cada página, cuando la propia página ya se ha cargado.

  3. Haz clic en Save changes y publica el sitio.

Configuración del sitio → Custom code (1). Con un plan de pago, la sección Custom Code (2) muestra los campos Head code y Footer code.

Los campos Head code y Footer code se describen en la ayuda de Webflow, en inglés: Custom code in head and body tags.

Formulario en línea: el elemento Code Embed

  1. En el Designer, abre el panel Add con el botón + y arrastra Code Embed adonde debe aparecer la encuesta.

  2. Pega el código de inserción de tu encuesta, con su ID en lugar de YOUR_SURVEY_ID:

    <div id="feedback-widget"></div>
    
    <script src="https://feedback.voxtrics.io/assets/prod/index.iife.js"></script>
    <script>
      window.SiteUtilsFeedback.initiateFeedbackModule({
        formId: 'YOUR_SURVEY_ID',
        container: document.getElementById('feedback-widget'),
      });
    </script>
    
  3. Guarda el código, cierra el editor y publica el sitio.

El botón + abre el panel Add (1), donde está Code Embed (2).

El elemento Code Embed y su editor de código se describen en la ayuda de Webflow, en inglés: Custom code embed.

Si la encuesta no aparece

  • Comprueba que la encuesta está publicada y pertenece al dominio en el que está publicado tu sitio. Un dominio añadido como example.com también sirve para www.example.com, pero no para your-site.webflow.io.
  • Vuelve a publicar el sitio después de cambiar el código: Webflow lo añade al publicar.
  • Las encuestas in situ y por correo no se colocan en un sitio: comparte su enlace.