Is it possible to make a link in an article a button?

Answered

14 Comments

  • Trapta
    Community Moderator

    Hi Melody Quinn,

    You can add the link by editing the theme code. Can you shed some light on where you want the link to your help center?

    Thanks

    0
  • Melody Quinn

    I would like the button inserted in an help article and be linked to the website we host our training videos on (the site is not supported by Zendesk). I inserted the HTML for a button in the article, but when I preview the article, it only shows as a link. I am hoping I do not need to allow unsafe content in order for this to work. 

    0
  • Trapta
    Community Moderator

    @Melody Quinn, do you mean you are adding it from the WYSIWYG editor? If so, then you need to add a little bit of CSS to make it look like a button.

    Let me know if this is what you are doing and if you need the css code for the button.

    Thanks

    0
  • Melody Quinn

    I hope I am using the right terminology, so here it goes.

    I am adding this in the Source code when editing an article: 

    <html>
    <head>
    <style>
    a:link, a:visited {
    background-color: #125d91;
    color: white;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    }

    a:hover, a:active {
    background-color: dimgray;
    }

    </style>
    </head>
    <body>

    <h2>Link Button</h2>
    <p>A link styled as a button:</p>
    <a href="default.asp" target="https://astra.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=9f27a31a-072b-498e-b181-a9ff016dc7c7">Watch video</a>

    </body>
    </html>

     

    And when I close the source code window, this shows in the WYSIWYG editor:

     

    But when I save and preview the article it loses the button and keeps the link:

     

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Melody,

    If you navigate to Guide Admin>Guide Settings can you confirm that Display Unsafe Content is enabled? Screenshot below:

    You'll want to make sure you hit save at the bottom of the page as well.

    0
  • Melody Quinn

    I was hoping this wasn't the only way to do this. Isn't there risk allowing unsafe content?

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Melody,

    There is a potential risk with users posting malicious content in your Help Center. However, as an Admin you will have the ability to remove this content if needed. More information can be found here: Allowing unsafe HTML in articles

    Let me know if you have any other questions for me.

    Thanks!

    0
  • Allison S

    Hey Brett Bowser

    I am doing something similar - adding code to an article (including a button) to have user's click on to pop-up an overlay with a decision flow (to help guide users through the troubleshooting process) 

    I have checked the box "display unsafe content", verified with our vendor that the code is correct as well as confirmed there are no pop-up blockers on my computer preventing this. 

    Do you know why the pop-up might not be displaying? 

    Thanks for the help!

    Allison

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Allison,

    Could you provide the source code you're using so we can take a look? I'm not completely familiar with code but that may help other users troubleshoot the issue here.

    Thanks!

    1
  • Allison S

    Hi Brett! 

    So this is the code that we are using for our decision flow - I have confirmed that this code is correct (and in the right place with the vendor)

    <button style="border-radius:6px;border-style:none;font-family:Arial;color:#ffffff;font-size:20px;background:#EF6D23;padding:10px 20px 10px 20px;text-decoration:none" onclick="show_popup('314844968','');" onmouseout="this.style.backgroundColor='#EF6D23';" onmouseover="this.style.backgroundColor='#b4521a';">Inbound Calling Checklist (Self-Service)</button>
    </p>
    <p>
    <script src="https://zingtree.com/deploy/popup-modal.js"></script>
    </p>

    Our vendor said that on their test site it is working as expected (they can click the button and the pop-up will appear) He did mention that it might be a side effect of whatever help center theme we are currently using (which I believe is the Copenhagen theme) Does this sound like a possibility?

    Thanks for your help! I look forward to your response. 

    -Allison 

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Allison,

    If the code is working on your test site then there may be an issue with the code you implementing and the existing code in your production site. Hopefully, other users can jump in and point you in the right direction :)

    0
  • Allison S

    Hello again, 

    We did a test with the code (outside of Zendesk Guide) and the iFrame popped up no problem.

    We are also not seeing any "errors" so we are having a hard time understanding why it won't pop-up.

    Sandbox - I have tried running this on the sandbox with no custom code active and the iframe still would not pop up
     
    Any assistance would be appreciated! Thanks - Allison
    0
  • Brett Bowser
    Zendesk Community Team

    Hey Allison,

    I reached out to some of our Community Moderators that are more experienced in this area. It's possible they can offer up a solution for you or at least point you in the right direction.

    1
  • Simon Celen
    Community Moderator

    Hi Allison,

    I've confirmed that it does work on the stock Copenhagen theme. The issue is definitely caused by the custom work that was done on your theme.

    I dug in and went through your theme's custom code. Sorry to be blunt but it's a mess. It's beyond the scope of this forum to point out all the issues.

    The reason the popup doesn't work is the following script in your footer.hbs:

    <script type="text/javascript">
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 1 Start--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 1 End--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 2 Start--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 2 End--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 3 Start--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 3 End--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 4 Start--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 4 End--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 5 Start--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab 5 End--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Tab Names--/g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 1 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 2 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 3 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 4 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 5 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 6 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 7 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 8 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 9 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 10 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 11 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 12 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 13 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 14 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 15 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 16 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 17 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 18 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 19 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 20 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 21 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 22 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 23 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 24 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 25 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 26 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 27 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 28 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 29 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/Accordion Section 30 Name: /g, "")
    document.body.innerHTML = document.body.innerHTML.replace(/--Accordion End--/g, "")
    </script>

    Removing this script block makes the pop up as intended, at least in my testing environment. I'm not sure what the goal is but it's running a regex replace on the entire document 42 times over. Removing it will break whatever it is trying to achieve but I'm sure there's a better way to hide those "Tab" and "Accordion Section" strings.

    Hope that helps.

    Simon

    0

Please sign in to leave a comment.

Powered by Zendesk