¿Qué plan tengo?

Disponible en los planes Suite Growth y superioresDisponible en todos los planes de Guide

El tema Copenhagen estándar permite a los usuarios finales emitir votos en relación a artículos del centro de ayuda. En esta receta se editará el código del tema para mostrar un mensaje de seguimiento cuando un usuario vota en contra de un artículo.

El mensaje de voto negativo incluye un vínculo a una Página de nueva solicitud que contiene un formulario de ticket. Un usuario puede llenar el formulario de ticket para dejar un comentario para el artículo. El formulario usa un campo de ticket personalizado para capturar el URL del artículo. En el momento de enviarlo, el formulario crea un ticket en Zendesk Support.

Acerca de esta receta

Es necesario ser un administrador de Zendesk Support para cumplir las indicaciones de esta receta. La receta incluye las siguientes tareas:
  • Tarea 1: Permitir la votación anónima
  • Tarea 2: Crear un campo de ticket personalizado para el URL del artículo
  • Tarea 3: Agregar CSS personalizado
  • Tarea 4: Actualizar la plantilla Página de artículo
  • Tarea 5: Agregar JavaScript personalizado
  • Tarea 6: Probar los cambios

La receta presupone que se está editando el tema Copenhagen estándar. Si desea editar otro tema o hacer cambios similares en un tema Copenhagen personalizado, es posible que tenga que cambiar los ejemplos de código.

La receta también usa un formulario de ticket que se rellena automáticamente. Los formularios de ticket rellenados automáticamente requieren un tema que use la API de creación de plantillas v2. Si desea verificar la versión de su tema, consulte Acerca de las versiones de creación de plantillas de Guide.

Nota: Esta receta requiere la edición del CSS, las plantillas de páginas y JavaScript. Cuando se edita un tema estándar, se guarda como un tema personalizado. Los temas personalizados no son admitidos por Zendesk ni son actualizados automáticamente cuando se estrenan nuevas funciones. Consulte Acerca de los temas estándar y los temas personalizados del centro de ayuda.

Tarea 1: Permitir la votación anónima

Si su centro de ayuda es visible para visitantes anónimos, puede permitir la votación anónima como un paso opcional. La votación anónima permite a los usuarios finales emitir votos en relación a los artículos del centro de ayuda sin necesidad de iniciar sesión.

Para permitir la votación anónima, siga las instrucciones en Permitir que los usuarios voten en los artículos de la base de conocimientos sin iniciar sesión. Luego vuelva a este artículo.

Tarea 2: Crear un campo de ticket personalizado para el URL del artículo

Para comenzar, cree un campo de ticket personalizado para capturar el URL del artículo del centro de ayuda.

Para crear un campo de ticket personalizado para el URL del artículo
  1. En el Centro de administración, haga clic en Objetos y reglas en la barra lateral y luego seleccione Tickets > Campos.
  2. Haga clic en Agregar campo.
  3. Seleccione el tipo de campo Texto.

  4. Ingrese el URL del artículo de ayuda como el Nombre mostrado.
  5. Bajo Permisos, seleccione Los clientes pueden editar.
  6. Bajo Clientes, ingrese URL del artículo de ayuda como el Título mostrado a los clientes.

  7. Haga clic en Save.

    Si su cuenta usa un solo formulario de ticket, el campo nuevo aparece automáticamente en el formulario de ticket. Si tiene varios formularios de ticket, tendrá que agregar el campo manualmente a los formularios de ticket en los que desea incluirlo.

  8. En la página Campos, copie la ID de campo para el campo URL del artículo de ayuda. La ID se usará más adelante en esta receta.

Tarea 3: Agregar CSS personalizado

A continuación, agregue el CSS personalizado para el mensaje de voto negativo a su tema.

Para agregar el CSS personalizado al tema
  1. En Guide, abra el editor de código para el tema. Si desea instrucciones, consulte Edición del tema del centro de ayuda.
  2. Haga clic en style.css.
  3. Pegue lo siguiente en la parte inferior del archivo: 
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    El código agrega reglas de CSS para una clase .downvote-message. La clase se utilizará para ocultar el mensaje de voto negativo hasta que un usuario emita un voto negativo para un artículo. La clase también estiliza el mensaje cuando se muestra.

  4. Si está actualizando el tema activo del centro de ayuda, haga clic en Publicar. De lo contrario, haga clic en Guardar.

Tarea 4: Actualizar la plantilla Página de artículo

A continuación, agregue el HTML para el mensaje de voto negativo a la plantilla Página de artículo del tema.

Para actualizar la plantilla Página de artículo
  1. En Guide, abra el editor de código para el tema.
  2. Haga clic en article_page.hbs.
  3. Agregue el siguiente fragmento de HTML antes de la etiqueta de cierre de <div class="article-votes"> : 
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us
      why.</a></p>
</div>
    En el fragmento, reemplace:
    • CUSTOM_FIELD_ID por la ID de campo para el campo URL del artículo de ayuda que se creó en Crear un campo de ticket personalizado para el URL del artículo
    • HTTPS://SUBDOMAIN.ZENDESK.COM por el URL de base para su centro de ayuda
    El HTML agrega un mensaje de voto negativo debajo de los botones de votación de cada artículo. La etiqueta div principal del mensaje usa la clase downvote-message que se agregó en Crear un campo de ticket personalizado para el URL del artículo. El CSS de esta clase oculta el mensaje de todos los usuarios. Más adelante en esta receta, se agregará JavaScript personalizado para mostrar el mensaje cuando un usuario deja un voto negativo.

    El mensaje incluye un vínculo a una Página de nueva solicitud que contiene un formulario de ticket. Este vínculo usa un parámetro de URL para rellenar automáticamente el campo URL del artículo de ayuda del formulario con el URL del artículo actual. Para obtener más información sobre los formularios de ticket rellenados automáticamente, consulte Creación de formularios de tickets rellenados automáticamente.

  • Si su cuenta usa un solo formulario de ticket, vaya directamente al paso siguiente. Si su cuenta tiene varios formularios de ticket, agregue el parámetro de URL &ticket_form_id=FORM_ID al final del valor href del fragmento de HTML. En el parámetro, cambie FORM_ID por la ID del formulario de ticket. Ejemplo: 
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us
      why.</a></p>
</div>

    El formulario de ticket debe ser visible para los usuarios finales. Para verificar o cambiar la visibilidad de un formulario de ticket, consulte Creación de varios formularios de ticket para atender distintos tipos de solicitudes.

  • Revise el elemento <div class="article-votes"> de la plantilla. Debería verse algo similar a esto: 
    <div class="article-votes">
  <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
  <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
    {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
    {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
  </div>
  <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
  </small>
  <div class="downvote-message">
    <p>We're sorry to hear that.</p>
    <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us
        why.</a></p>
  </div>
</div>
  • Si está actualizando el tema activo del centro de ayuda, haga clic en Publicar. De lo contrario, haga clic en Guardar.

Tarea 5: Agregar JavaScript personalizado

Agregue un poco de JavaScript para mostrar el mensaje de voto negativo cuando un usuario vota en contra de un artículo.

Para agregar JavaScript personalizado al tema
  1. En Guide, abra el editor de código para el tema.
  2. Haga clic en script.js.
  3. Pegue lo siguiente en la parte inferior del archivo: 
    // Display message for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const voteMessage = document.querySelector(".downvote-message");

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");
        let isPressed = button.matches(".button-primary");

        if (isDownButton && !isPressed) {
          voteMessage.style.display = "block";
        } else {
          voteMessage.style.display = "none";
        }
      });
    });
  }
});

    Cuando un usuario hace clic en el botón para votar No, JavaScript muestra el mensaje de votación negativa que se agregó en el paso Actualizar la plantilla Página de artículo. Si el usuario restablece su voto o lo cambia a Sí, JavaScript oculta el mensaje de nuevo.

  4. Si está actualizando el tema activo del centro de ayuda, haga clic en Publicar. De lo contrario, haga clic en Guardar.

Tarea 6: Probar los cambios

Pruebe la nueva funcionalidad de votación para asegurarse de que está funcionando correctamente.

Para comprobar sus cambios
  1. En Guide, abra el editor de código para el tema.
  2. Haga clic en Previsualizar.
  3. En la ventana Previsualizar, seleccione un Rol de vista previa de Usuario final.
  4. Vaya a un artículo en el centro de ayuda. En la parte inferior del artículo, haga clic en el botón para votar No bajo ¿Fue útil este artículo?

    A continuación debería aparecer un vínculo que dice Díganos por qué.

  5. Haga clic en el vínculo Díganos por qué.

    El vínculo debería abrir una Página de nueva solicitud que contiene el formulario de ticket. El campo “URL del artículo de ayuda” del formulario de ticket debería contener el URL del artículo del centro de ayuda relacionado.

    Si lo desea, puede enviar el formulario para crear un ticket de prueba.

  6. Vaya a otro artículo del centro de ayuda y haga clic en el botón para votar No.
  7. Después de que aparezca el mensaje de voto negativo, haga clic en el botón para votar Sí. El mensaje de voto negativo debería desaparecer.
  8. Si no hizo los cambios en el tema activo de su centro de ayuda y está listo para lanzarlo, puede establecer el tema personalizado como el tema activo. Consulte Cambio del tema activo del centro de ayuda.
Tecnología de Zendesk