Hiding Chat button on printed pages

10 Comentarios

  • Nicole S.
    Zendesk Community Team

    Hi Pamela, 

    What are you printing from? Are these articles in your knowledge base? 

    0
  • Pamela Ellis

    Hi Nicole. Thanks for your reply.

    The chat button prints out on the recipes on our website like this one:

    https://topsecretrecipes.com/taco-bell-mexican-pizza-copycat-recipe.html?category_id=549

    I tested this with both Firefox and Chrome. The chat button oftentimes interferes with the instructions or steps of our recipes. 

    Thanks!

    0
  • Nicole S.
    Zendesk Community Team

    Hi Pamela -

    Is it possible to expand the browser window you're viewing the recipe in? I noticed at a certain width the chat button stays to the right and the recipe is fully visible without the chat button blocking it.

    0
  • Pamela Ellis

    Hi Nicole, 

    Thank you! That might work however, I own and operate the website and I'm afraid that our users would know no to expand the browser window in order to print without the chat button. Do you have any other ideas?

    0
  • Nicole S.
    Zendesk Community Team

    Hi Pamela,

    You could try moving the location of the chat widget on your site. Here's more info on how to do that:

    How do I re-position the Web Widget or Chat widget on my website?

    0
  • Mariia

    How can I hide a chat button from printed pages?

    In my react app I have zendesk chat in one component, in this component I have a link to the second component, when I print the second component I see a chat button on it. How can I remove the chat button from it?

    0
  • Thomas Verschoren
    Community Moderator

    Hey,

    This is actually a bug in the current widget implementation.

    I've escalated it to the Widget team

    As for now, adding this to your website HTML should prevent it from printing:

    @media print
    {    
        #webWidget 
        {
            display: none !important;
        }
    }
    0
  • Miranda Burford
    Zendesk Product Manager

    Hi All,

    I'm Miranda, the Web Widget Product Manager.  Thanks very much for jumping in, Thomas.  Just one small amendment to code above.  You'll need to add #launcher after #webWidget as shown below.

    @media print
    {
    #webWidget, #launcher
    {
    display: none !important;
    }
    }

    This is actually the intended behaviour of the Web Widget.  We don't try to optimise websites for print.  We'd rather give customers the flexibility to be able to choose whether to show the widget on printed pages or not. 

    Out of curiosity, we did investigate whether it was possible for us to inline the @media print styles into the iframe but unfortunately not.

    We'd suggest you use the code above as a workaround.

    Thanks,

    - Miranda.

     

     

    0
  • Andreas Schuster
    Community Moderator
    We'd rather give customers the flexibility to be able to choose whether to show the widget on printed pages or not. 

    Since we were affected by this weird widget behavior in our company I want to add my two cents - I think there are zero use cases that the Widget is shown on a printed piece of paper.

    We just got daily complaints about it since we added the widget - people tend to print our websites. (invoicing platform)

    Maybe this CSS media query should be added to the install documentation of the widget?

    0
  • Miranda Burford
    Zendesk Product Manager

    Thanks for the recommendation, Andreas Schuster.  I'll bring this up with our documentation team to ensure that we're sharing this script with our customers at the right times.

    - Miranda.

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk