Linking out via Custom Code Module in Resource Center

Im working on a RC refresh using Custom Code. I have a module that contains a series of links (see screenshot). However, no link opens. At all. When clicked, the RC just closes.

 

However the same code works in both a regular guide and in w3school's TryIt.
Am I missing something completely obvious? 

0

Comments

5 comments
  • Hi Devin Hartnett

    Looks like you are missing unique id's for each button and target="_blank" to load the URL in a new tab in your code.

    Check out this example code I took from the from pendo RC support module which you can load on your end as well but I am adding it here for other users for future use.

    <div id="pendo-code-a5c864ef" class=" pendo-code-block" style="display: block; float: none; vertical-align: baseline;"><script type="text/javascript">
    function loginToZendesk(){
      window.fetch(window.location.origin + '/loginZendesk', {
        method: 'post',
        body: JSON.stringify({
          returnTo: "https://support.pendo.io/hc/en-us/community/topics"
        }),
      headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(result => result.json())
      .then(result => {
      // we now know that we have the link we need from the backend
      window.open(result.redirect, "_blank") || window.location.assign(result.redirect);
      })
    };
    </script>

    <div>
    <a href="https://academy.pendo.io/" target="_blank" id="academy-btn">
    <img src="https://content.pendo-internal.pendo.io/0QEQAhTvp96TaSrW-2qUpHK1Oyo/guide-media-a88cd815-3a3b-475a-94b4-b16588605b8c" class="image-link" alt="Academy">
    </a><a onclick="loginToZendesk()" id="discussions-btn">
    <img src="https://content.pendo-internal.pendo.io/0QEQAhTvp96TaSrW-2qUpHK1Oyo/guide-media-b0521383-adb7-46c7-8b43-46f9ba506eed" class="image-link" alt="Discussion Forum">
    </a><a href="http://connect.pendo.io/" target="_blank" id="pc-btn">
    <img src="https://content.pendo-internal.pendo.io/0QEQAhTvp96TaSrW-2qUpHK1Oyo/guide-media-b040b05b-926f-47e5-bd78-8aff1a8f9679" class="image-link" alt="Pendo Connect">
    </a></div><a href="http://connect.pendo.io/" target="_blank" id="pc-btn">
    <style id="pendo-inline-css" type="text/css">#pendo-g-aHQ1KLt7050Cbhtby_fr9cj4rrI {
    /*Link tiles styling END*/
    /*Styling for the Link Images*/
    }
    #pendo-g-aHQ1KLt7050Cbhtby_fr9cj4rrI .footer {
    padding: 10px;
    }
    #pendo-g-aHQ1KLt7050Cbhtby_fr9cj4rrI div {
    width: 100%;
    }
    #pendo-g-aHQ1KLt7050Cbhtby_fr9cj4rrI .image-link {
    margin-top: 4%;
    margin-bottom: 0%;
    margin-left: 0%;
    margin-right: 10%;
    width: 100%;
    border: 1px #DADCE5;
    border-style: solid;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    }
    #pendo-g-aHQ1KLt7050Cbhtby_fr9cj4rrI .image-link:Hover {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    }
    </style></a></div>
    0
  • I found this code from another Pendo employee in the forums, and tried it copy+paste. The links dont open at all.

    0
  • Hi Devin Hartnett the code looks correct but if you are trying to test it in the designer mode it wont work, you will have to save to code then push the resource center into staging and then in production and the launch this module in your prod environment only then you can test it out.

    0
  • Hi Rohit Pandey Unfortunately Im in our Production environment testing this. Ive got the module segmented to just my email address so it wont appear for our consumers. Our test and stage enviros end with .dev and .us

     

    0
  • Make sure you add 

    target="_blank"

    inside your <a> tags so they open in a new tab. Not sure if that will fix it all though?

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post