18 Comments

  • Jacob's Sales & Tech store - Zendesk Starter User

    Hello Dorian, 

    What you would need to do is this!

    Go to your help center> once there see in the lower right hand corner customize design > then to add your logo all you need to do is scroll down until you see branding,click that. Once there you will see upload logo. 

    This should work for you. 

    Hope this helps!

    Thanks

    Regards, 

    Kim

    0
  • Dorian Staten

    Thanks Kim,

    But I'm not having trouble uploading my logo, I'm having trouble changing my logo's link. Currently it is linked to the support center's home page, and I want it to link to our website's my page, http://paper.li.

    Dorian

    0
  • Jessie Schutz
    Zendesk Team Member

    Hi Dorian! Great question!

    The answer to this, as well as many other tidbits you might find helpful, are stashed here: Customizing the Help Center.

    To accomplish your goal here, just follow these steps:

    Q: Clicking the logo image takes users back to the home page. Is there a way to change this so that it takes them to a different page?

    You can change this in the HTML. Do the following:

    1. Upload your logo image to the Assets area. Make a note of the image URL.
    2. Open the Header template and locate the logo div tag in the HTML:

    <div class="logo">{{logo}}</div>

    1. Replace the {{logo}} placeholder in the div tag with the following HTML (in bold): <div class="logo"> <a href="http://_new\_url_"> <img src="https://_path\_to\_image_/_image_.png" /> </a> </div>

    The code inserts a linked image in the page.

    1. Specify the URL of the page (new_url), the path to your logo image (path_to_image), and the image name (image).
    2. Save your work.

    Credit: Wes

     

    This should get your where you need to be! Let us know if you have any other questions!

    5
  • Wes Drury

    @Dorian - If you have any issues along the way just let me know.  If for some reason this doesn't work for you then we can do the same thing with some JQuery code.

    0
  • Dorian Staten

    Thank you so much, Jessie and Wes, that did the trick!

    Best,

    Dorian

    0
  • Wes Drury

    @Dorian - Awesome glad to hear and thanks for the update.

    0
  • Alexander Matthes

    @Wes: we have a Help center with multiple languages and multiple domains to link to. How can we do that?

    With the solution of Jessie we can only link to one website..

    0
  • Wes Drury

    @Alexander - You are going to have to use JQuery here and based off the language selected then you could redirect the end users to the correct domain.  Can you give me more details on your exact use case. 

    0
  • Alexander Matthes

    @Wes: I would like to link our shops (see: www.medishopxl.com) with a support button to the Help Center. But the Help Center will need a button to return to the shop. I thought that the logo would be the best option. Any idea how we can do this with multiple domains by using JQuery? 

     

    0
  • Jonathan Symons

    @Wes: I'm looking to add a link for customers to their Dropbox folder. I know how to make it work for a single link (not user specific), but how would you check which user it is and then use the appropriate link for that organization? My understanding is that you can't tell what the user id in home page curly bars.

    Currently, I'm adding a button to the list of knowledge base categories on the home page. 

    0
  • Wes Drury

    @Jonathan - I would have to learn more about your setup but you should be able to parse a users email address if they are logged into the Help Center.  I believe there is already code to do this as you can automatically fill in a user email address into the web widget.

    0
  • Marc Barron

    Hi @Wes

    When we use this code in our guide, it simply adds our url to the end of the guide url. Instead of routing back to our main website (coursekeyeducation.com), the link becomes support.coursekeyeducation.com/hc/coursekeyeducation.com

    Any idea what we're doing wrong? We changed the header script to the following: 

     

    <header class="header">
    <div class="logo">
    <a href="coursekeyeducation.com">
    <img src="https://theme.zdassets.com/theme_assets/792329/a945418b72298998fac0e1f47f5130e348a7184b.png">
    </a>
    </div>

    0
  • Customer Support Theme

    Hello @Marc Barron,

    Use this

    <header class="header"> 
    <div class="logo">
    <a href="https://coursekeyeducation.com/" target="_self">
    <img src="https://theme.zdassets.com/theme_assets/792329/a945418b72298998fac0e1f47f5130e348a7184b.png">
    </a>
    </div>
    </header>

    Note: If you want to open the link in the new tab just replace the "_self" to "_blank".

    Please let us know if face any issue.

    Thanks

    Team Customer Support Theme

    1
  • Marc Barron

    @Customer Support Theme

     

    Thanks! Worked perfectly.

    0
  • Kevin Land

    Hi there, 

    I'm trying to accomplish the same but am not seeing the parallel between these examples and the code in my header section. I'd like the logo to link back to www.health-ade.com. Would I just replaced the details after "alt ="  before the "/link"? 

     

    <header class="header">
    <div class="logo">
    {{#link 'help_center'}}
    <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
    {{/link}}
    </div>
    <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">
    {{link 'community'}}
    <a class="submit-a-request" href="/hc/en-us/requests/new">Contact Us</a>
    </nav>
    {{#if signed_in}}
    <div class="user-info dropdown">
    <button class="dropdown-toggle" aria-haspopup="true">
    {{user_avatar class="user-avatar"}}
    {{user_name}}
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" 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>
    </button>
    <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"}}
    {{t 'sign_in'}}
    {{/link}}
    {{/if}}
    </div>
    </header>

    0
  • Elissa
    Zendesk Community Team

    Hello Kevin Land,

    The article this original post was based on has since been archived with out of date info as our product grows and changes! But, I was able to get some detail on what the code change looks like currently to get your logo to link to your website. Here is what you'll need to do:

    Change this:
    {{#link 'help_center'}}
    <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
    {{/link}}
    to this...
    <a href="https://www.example.com">
    <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
    </a>

    I hope that helps! 

    1
  • Kevin Land

    That did it! Thank you! 

    0
  • Elissa
    Zendesk Community Team

    Wonderful! Glad to hear it!

    0

Please sign in to leave a comment.

Powered by Zendesk