How to add a pop up box when yes or no was clicked on was this article helpful

7 Commentaires

  • Ifra Saqlain
    Actions pour les commentaires Permalien

    Hey Anton,

     

    Please copy and paste this code on your article_page.hbs template. I did it on default Copenhagen theme.

    I did bold the comment text for popup code on the page.

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    <div class="search-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search scoped=settings.scoped_kb_search submit=false}}
    </div>
    </nav>

    <div class="article-container" id="article-container">
    <aside class="article-sidebar" aria-labelledby="section-articles-title">
    {{#if settings.show_articles_in_section}}
    <div class="collapsible-sidebar">
    <button type="button" class="collapsible-sidebar-toggle" aria-labelledby="section-articles-title" aria-expanded="false">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
    <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
    </svg>
    </button>
    <span id="section-articles-title" class="collapsible-sidebar-title sidenav-title">
    {{t 'articles_in_section'}}
    </span>
    <div class="collapsible-sidebar-body">
    <ul>
    {{#each section.articles}}
    <li>
    <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if section.more_articles}}
    <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
    {{/if}}
    </div>
    </div>
    {{/if}}
    </aside>

    <article id="main-content" class="article">
    <header class="article-header">
    <h1 title="{{article.title}}" class="article-title">
    {{article.title}}
    {{#if article.internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </h1>

    <div class="article-author">
    {{#if settings.show_article_author}}
    <div class="avatar article-avatar">
    {{#if article.author.agent}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-agent">
    <path fill="currentColor" d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z"/>
    </svg>
    {{/if}}
    <img src="{{article.author.avatar_url}}" alt="" class="user-avatar"/>
    </div>
    {{/if}}
    <div class="article-meta">
    {{#if settings.show_article_author}}
    {{#link 'user_profile' id=article.author.id}}
    {{article.author.name}}
    {{/link}}
    {{/if}}

    <ul class="meta-group">
    {{#is article.created_at article.edited_at}}
    <li class="meta-data">{{date article.created_at timeago=true}}</li>
    {{else}}
    <li class="meta-data">{{date article.edited_at timeago=true}}</li>
    <li class="meta-data">{{t 'updated'}}</li>
    {{/is}}
    </ul>
    </div>
    </div>

    {{#if settings.show_follow_article}}
    <div class="article-subscribe">{{subscribe}}</div>
    {{/if}}
    </header>

    <section class="article-info">
    <div class="article-content">
    <div class="article-body">{{article.body}}</div>

    <div class="article-attachments">
    <ul class="attachments">
    {{#each attachments}}
    <li class="attachment-item">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="attachment-icon">
    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M9.5 4v7.7c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V3C6.5 1.6 7.6.5 9 .5s2.5 1.1 2.5 2.5v9c0 1.9-1.6 3.5-3.5 3.5S4.5 13.9 4.5 12V4"/>
    </svg>
    <a href="{{url}}" target="_blank">{{name}}</a>
    <div class="attachment-meta meta-group">
    <span class="attachment-meta-item meta-data">{{size}}</span>
    <a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">Download</a>
    </div>
    </li>
    {{/each}}
    </ul>
    </div>
    </div>
    </section>

    <footer>
    <div class="article-footer">
    {{#if settings.show_article_sharing}}
    <div class="article-share">{{share}}</div>
    {{/if}}
    {{#if settings.show_article_comments}}
    {{#if comments}}
    <a href="#article-comments" class="article-comment-count" title="{{t 'go_to_comments'}}">
    <span class="visibility-hidden">
    {{t 'comments_count' count=article.comment_count}}
    </span>
    <span aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="article-comment-count-icon">
    <path fill="none" stroke="currentColor" d="M1 .5h10c.3 0 .5.2.5.5v7c0 .3-.2.5-.5.5H6l-2.6 2.6c-.3.3-.9.1-.9-.4V8.5H1C.7 8.5.5 8.3.5 8V1C.5.7.7.5 1 .5z"/>
    </svg>
    {{article.comment_count}}
    </span>
    </a>
    {{/if}}
    {{/if}}
    </div>
    {{#with article}}



    {{!-- HERE ADDED POPUP CODE --}}

    <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">
    <div class="vote-btn-wrapper">
    {{vote 'up' role='radio' class='button article-vote article-vote-up dropdown-toggle' selected_class="button-primary"}}
    <div class="thank-popup-wrapper dropdown-menu dropdown-menu-end">
    <div class="popup-inner">
    <h3>Thank You</h3>
    </div>
    </div>
    </div>

    <div class="vote-btn-wrapper">
    {{vote 'down' role='radio' class='button article-vote article-vote-down dropdown-toggle' selected_class="button-primary"}}
    <div class="tel-popup-wrapper dropdown-menu dropdown-menu-end">
    <div class="popup-inner">
    <a href="tel:999999999">99999999999</a>
    </div>
    </div>
    </div>
    </div>

    {{!-- End POPUP CODE --}}


    <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
    </small>
    </div>
    {{/with}}

    <div class="article-more-questions">
    {{request_callout}}
    </div>
    <div class="article-return-to-top">
    <a href="#article-container">
    {{t 'return_to_top'}}
    <svg xmlns="http://www.w3.org/2000/svg" class="article-return-to-top-icon" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
    </svg>
    </a>
    </div>
    </footer>

    <div class="article-relatives">
    {{#if settings.show_recently_viewed_articles}}
    {{recent_articles}}
    {{/if}}
    {{#if settings.show_related_articles}}
    {{related_articles}}
    {{/if}}
    </div>
    {{#if settings.show_article_comments}}
    <div class="article-comments" id="article-comments">
    <section class="comments">
    <header class="comment-overview">
    <h2 class="comment-heading">
    {{t 'comments'}}
    </h2>
    <p class="comment-callout">{{t 'comments_count' count=article.comment_count}}</p>
    {{#if comments}}
    <div class="dropdown comment-sorter">
    <button class="dropdown-toggle" aria-haspopup="true">
    {{t 'sort_by'}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon">
    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
    </svg>
    </button>
    <span class="dropdown-menu" role="menu">
    {{#each comment_sorters}}
    <a aria-selected="{{selected}}" href="{{url}}" role="menuitem">{{name}}</a>
    {{/each}}
    </span>
    </div>
    {{/if}}
    </header>

    <ul id="comments" class="comment-list">
    {{#each comments}}
    <li id="{{anchor}}" class="comment">
    <div class="comment-wrapper">
    <div class="comment-info">
    <div class="comment-author">
    <div class="avatar comment-avatar">
    {{#if author.agent}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-agent">
    <path fill="currentColor" d="M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm2.3 7H3.7c-.3 0-.4-.3-.3-.5C3.9 7.6 4.9 7 6 7s2.1.6 2.6 1.5c.1.2 0 .5-.3.5z"/>
    </svg>
    {{/if}}
    <img src="{{author.avatar_url}}" alt="" class="user-avatar"/>
    </div>
    <div class="comment-meta">
    <span title="{{author.name}}">
    {{#link 'user_profile' id=author.id}}
    {{author.name}}
    {{/link}}
    </span>

    <ul class="meta-group">
    {{#if editor}}
    <li class="meta-data">{{date edited_at timeago=true}}</li>
    <li class="meta-data">{{t 'edited'}}</li>
    {{else}}
    <li class="meta-data">{{date created_at timeago=true}}</li>
    {{/if}}
    </ul>
    </div>
    <div class="comment-labels">
    {{#with ticket}}
    <a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
    {{t 'request'}}{{id}}
    </a>
    {{/with}}
    {{#if pending}}
    <span class="comment-pending status-label status-label-pending-moderation">{{t 'pending_approval'}}</span>
    {{/if}}
    </div>
    </div>

    <section class="comment-body">{{body}}</section>
    </div>

    <div class="comment-actions-container">
    <div class="comment-vote vote" role="group">
    {{#vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
    </svg>
    {{/vote}}
    {{vote 'sum' class='vote-sum'}}
    {{#vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
    </svg>
    {{/vote}}
    </div>
    <div class="comment-actions actions">
    {{#actions}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
    <path fill="none" stroke="currentColor" d="M13.17 3.07l-1.64.71c-.48-.4-1.03-.72-1.63-.94l-.22-1.79a.511.511 0 00-.4-.44C8.86.54 8.44.5 8 .5c-.44 0-.86.04-1.28.11-.22.04-.38.22-.4.44l-.21 1.79c-.6.22-1.15.54-1.63.94l-1.65-.71a.491.491 0 00-.58.13c-.55.65-.99 1.4-1.29 2.21-.08.21 0 .44.18.58l1.45 1.08a4.91 4.91 0 000 1.87l-1.45 1.08c-.18.13-.25.37-.18.58.3.81.74 1.55 1.28 2.2.14.17.38.22.58.13l1.65-.71c.48.4 1.03.72 1.63.94l.21 1.79c.03.22.19.4.4.44.43.07.85.11 1.29.11.44 0 .86-.04 1.28-.11.22-.04.38-.22.4-.44l.21-1.79c.6-.22 1.15-.54 1.63-.94l1.65.71c.2.09.44.04.58-.13.54-.65.98-1.39 1.28-2.2.08-.21 0-.44-.18-.57L13.4 8.95c.07-.32.1-.63.1-.95s-.03-.63-.09-.94l1.45-1.08c.18-.13.25-.37.18-.58-.3-.81-.74-1.55-1.28-2.2a.51.51 0 00-.59-.13z"/>
    <circle cx="8" cy="8" r="2.5" fill="none" stroke="currentColor"/>
    </svg>
    {{/actions}}
    </div>
    </div>
    </div>
    </li>
    {{/each}}
    </ul>

    {{pagination}}

    {{#form 'comment' class='comment-form'}}
    <div class="avatar comment-avatar">
    {{user_avatar class='user-avatar'}}
    </div>
    <div class="comment-container">
    {{wysiwyg 'body'}}
    <div class="comment-form-controls">
    {{input type='submit' class="button button-large"}}
    </div>
    </div>
    {{/form}}

    <p class="comment-callout">{{comment_callout}}</p>
    </section>
    </div>
    {{/if}}
    </article>
    </div>
    </div>


     

     

    Copy the CSS code and paste it on your stylesheet:

     


    /*** POPUP CODE ***/


    .tel-popup-wrapper, .thank-popup-wrapper{
    width: 200px;

    height: 70px;
    align-items: center;
    background: #efefef;
    text-align: center;
    border-radius: 10px;
    top: -72px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition:all 9s ease;
    }
    .tel-popup-wrapper .popup-inner,
    .thank-popup-wrapper .popup-inner{
    margin: 0 auto
    }
    .thank-popup-wrapper .popup-inner h3{
    margin:0;
    }
    .article-votes-controls{
    position:relative
    }
    .vote-btn-wrapper{
    display:inline-block;
    }
    .vote-btn-wrapper button{
    border:1px solid;
    text-align:center;
    }
    .article-votes .dropdown-menu{
    display:none;
    }
    .article-votes .dropdown-menu[aria-expanded="true"]{
    display:flex;
    }

     

     

    If any issue let me know :)

    Team

     

     

     

     

    1
  • Anton Van der meyden
    Actions pour les commentaires Permalien

    Hello Ifra,

    Ifra Saqlain

    Thank you so much for all your help.

    This works.

    Kind Regards,

    Anton

    0
  • Anton Van der meyden
    Actions pour les commentaires Permalien

    Hi Ifra,

    Ifra Saqlain

    I have come across two issues when I go to the Help Center as an anonymous user.

    When I click yes or no on an article it is asking foe me to log in. We have our Help Center open to the public so a log in is not required.

    See screenshot below:

     

    This box has also generated a drop down button and an x. The x and drop down don't do anything. Can we remove them?

     

    Can please assist me further with these two queries?

    Thank you.

    Kind Regards,

    Anton

    0
  • Anton Van der meyden
    Actions pour les commentaires Permalien

    Hi Ifra,

    Ifra Saqlain

    I logged into see if it works as and end user with a log in. 

    The Yes and No button do work on the article when logged in but as explained in my previous message customers do not need to log in to our Help Center.

    When logged in the drop-down box and the x beside articles in this section don't do anything so I think it be best to remove them.

    Thank you.

    Kind Regards,

    Anton

     

    0
  • Ifra Saqlain
    Actions pour les commentaires Permalien

    Hey Anton :)

    How are you?

     

    So,

     

    When I click yes or no on an article it is asking foe me to log in. We have our Help Center open to the public so a log in is not required.

     

    Go to the admin setting and check the 'Anonymous voting on articles' and update.

    It's happening because you have unchecked this for anonymous users.

     

     

     

     

    This box has also generated a drop down button and an x. The x and drop down don't do anything. Can we remove them?

    If you don't need then you can hide. It just shows the articles in your section. 

    like you have 2 sections A and B.  You are in an article which belongs to B section then this sidebar would show all articles which is created in the B sections.

     

    Have a good day.

     

     

     

    0
  • Anton Van der meyden
    Actions pour les commentaires Permalien

    Hello Ifra,

    Ifra Saqlain

    I hope you are well?

    The first part was nice and easy. Thank you.

    I would like to change it so it looks like this:

    Instead of this :

    This changed when I added the code you provided to the article page. 

    I'm happy to keep the articles showing in the side bar but would like to remove the dropdown button and the x as this is not required as the articles show anyway.

    Can you advise how to do this? 

    I really appreciate all your help.

    Thank you.

    Kind Regards,

    Anton

    0
  • Anton Van der meyden
    Actions pour les commentaires Permalien

    Hello Ifra,

    Ifra Saqlain

    I have figured this out. 

    Thank you for all your help.

    Stay safe and have a nice day.

    Kind Regards,

    Anton

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk