Tender Widget from Link

Milo D.'s Avatar

Milo D.

25 Aug, 2014 12:10 PM

Hello, I have been trying to get a link to open our tender widget, but I am not having any success. I created this simple page to test the link. Can you take a look and tell me what's wrong?

<html>
<body>
    <script type="text/javascript" charset="utf-8">
      Tender = {
        hideToggle: true,
        sso: "unique-sso-token-of-current-user",
        widgetToggles: [document.getElementById('helplink')]
      }
    </script>
    <script src="https://edikon.tenderapp.com/tender_widget.js" type="text/javascript"></script>
    
    <a id="helplink" href="#" class="button">Open Widget</a>
</body>
</html>

Thank you.

  1. 1 Posted by Nicole on 25 Aug, 2014 01:49 PM

    Nicole's Avatar

    Milo -

    The first script needs to be inside the <head> tag (which is missing in your example) and the second one needs to be placed right before the </body>. You can read more about setting up and customizing the widget here - https://help.tenderapp.com/kb/setup-installation/adding-and-customi....

    Let us know if you have any other questions.

    Thanks,
    Nicole

  2. 2 Posted by Julien on 25 Aug, 2014 02:24 PM

    Julien's Avatar

    Hey Milo,

    JavaScript execution occurs as the page is loaded. In your example, when the configuration is loaded (i.e. as the page is being parsed), document.getElementById('helplink') is not going to work because the link does not exist yet (since it's lower than the script).

    There are 2 ways to fix the problem:

    • But both script tags at the bottom of the page. Then the DOM element that you are referencing will already exist and you won't have any issue.

      <html>
      <body>          
          <a id="helplink" href="#" class="button">Open Widget</a>
          <script type="text/javascript" charset="utf-8">
            Tender = {
              hideToggle: true,
              sso: "unique-sso-token-of-current-user",
              widgetToggles: [document.getElementById('helplink')]
            }
          </script>
          <script src="https://edikon.tenderapp.com/tender_widget.js" type="text/javascript"></script>
      </body>
      </html>
      
    • Using a JS framework like jQuery, defer the scripts to the DOMReady event:

      $(function() {
        window.Tender = {
          hideToggle: true,
          sso: "unique-sso-token-of-current-user",
          widgetToggles: [document.getElementById('helplink')]
        }
        var s = document.createElement('script');
        s.setAttribute('src','https://edikon.tenderapp.com/tender_widget.js');
        document.body.appendChild(s);
      });
      

    Let me know how it goes.

  3. 3 Posted by Milo D. on 25 Aug, 2014 02:32 PM

    Milo D.'s Avatar

    Thank you Julien! I was trying to fix this based on the previous response and was going nuts when it wasn’t working!

    This definitely solves the problem. Thank you so much!

  4. 4 Posted by Julien on 25 Aug, 2014 02:34 PM

    Julien's Avatar

    No worries. The KB wasn't very clear about it, so I updated the KB as well.

  5. brandi closed this discussion on 29 Aug, 2014 11:42 PM.

Discussions are closed to public comments.
If you need help with Tender please start a new discussion.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac