English (US)

Add pop up text on yes and no vote buttons in Help Centre

Answered
Anton Van der meyden

Hello,

Can someone please assist me with adding pop-up text on the yes and no vote buttons in Help Centre?

I have used the below script on two other Help Centers and it works perfectly but won't work in my new Help Centre.

My script is below.

Below added article_page.hbs

 

<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">

 

          <span id="section-articles-title" class="collapsible-sidebar-title sidenav-title">

              <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>

          </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" style="background-color: #F5F8FB; border: 1px solid purple; margin: 20px; border-radius: 10px; padding: 10px 10px 10px 10px; >

      <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 for your feedback </h3> ***Add your text here for yes box***

                 </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">

                <h3>For further assistance please call </h3> ***Add your text here for no box***

 

              </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>

 

The below added to CS

 

/*** POPUP CODE ***/

 

 

.tel-popup-wrapper, .thank-popup-wrapper{

   width: 200px;

  

    height: 100px;

    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;

}

Please provide the changes required to make this work.

Thank you.

Kind Regards,

Anton

7 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    HEy Anton Van der meyden, you didn't close the double quotes in the article page code:

     

    It should be closed:

     

     

    Team

    0
  • Anton Van der meyden

    Ifra Saqlain

    Hello,

    Thank you for your help.

    I have updated this but still have the same issue. I have my CSS at the bottom of the style.css

    When I click the pop up still does not work.

    Can you please assist?

    Thank you.

    Kind Regards,

    Anton

     

    0
  • Ifra Saqlain
    • Edited
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Okay, remove the inline CSS from your <article ...> tag,

    Current:-

    <article id="main-content" class="article" style="background-color: #F5F8FB; border: 1px solid purple; margin: 20px; border-radius: 10px; padding: 10px 10px 10px 10px;" >

     

    After:-

    <article id="main-content" class="article">

     

     

    Output:

     

    if still you're getting issue then share the URL here so I can figure it out.

     

    0
  • Anton Van der meyden

    Ifra Saqlain

    Thank you for your help. This resolved the issue.

    Can you assist me with one more query, please?

    I would like to remove the sign-in button completely to all users.

    My script for my header is below. I also 


    <a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>

    <header class="header">
      <div class="logo">
        {{#link 'help_center'}}
          <a href="https://www.hellocasino.com/"><img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
      </div>
      
            <right><p><font size="4"><font color="white"><< <b>{{dc 'help_cente-back_to_hello_casino'}}</b> </font></font><p></right>


      <div class="nav-wrapper">
        <button class="menu-button" aria-controls="user-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-menu">
            <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13"/>
          </svg>
        </button>
        
        
        <nav class="user-nav" id="user-nav">
         
        </nav>
        {{#if signed_in}}
          
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" role="menuitem"}}
              {{my_profile role="menuitem"}}
              {{change_password role="menuitem"}}
              {{link "sign_out" role="menuitem"}}
            </div>
          </div>
        {{else}}
          {{#link "sign_in" class="sign-in"}}
            {{t 'sign_in'}}
          {{/link}}
        {{/if}}
      </div>
        
            
    </header>

    I did remove the below but when I active my Help Centre it comes back but whenI preview as an end user it is gone. Is there something I am missing that makes appear?

     

     <nav class="user-nav" id="user-nav">
         
        </nav>
        {{#if signed_in}}
          
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" role="menuitem"}}
              {{my_profile role="menuitem"}}
              {{change_password role="menuitem"}}
              {{link "sign_out" role="menuitem"}}
            </div>
          </div>
        {{else}}
          {{#link "sign_in" class="sign-in"}}
            {{t 'sign_in'}}
          {{/link}}
        {{/if}}
      </div>

    Thank you.

    Kind Regards,

    Anton

     

    0
  • Anton Van der meyden

    Ifra Saqlain

    So it is Annoymus users it still appears to.

    Thank you.

    Kind Regards,

    Anton

    0
  • Ifra Saqlain
    • Edited
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Anton Van der meyden, I think the header code is not correct, share the URL of your HC I want to see myself.

     

    I applied your header code to the fresh Copenhagen Theme and got the UI of the header:

    0
  • Anton Van der meyden

    Ifra Saqlain

    I have adjusted my code and it works as intended now.

    Thank you for your help.

    Kind Regards,

    Anton

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post
Powered by Zendesk