tag:help.tenderapp.com,2008-11-12:/discussions/problems/67453-tender-widget-from-linkTender: Discussion 2014-08-29T23:42:48Ztag:help.tenderapp.com,2008-11-12:Comment/342656212014-08-25T13:49:39Z2014-08-25T13:49:39ZTender Widget from Link<div><p>Milo -</p>
<p>The first script needs to be inside the
<code><head></code> tag (which is missing in your example)
and the second one needs to be placed right before the
<code></body></code>. You can read more about setting up and
customizing the widget here - <a href=
"https://help.tenderapp.com/kb/setup-installation/adding-and-customizing-the-tender-widget">
https://help.tenderapp.com/kb/setup-installation/adding-and-customi...</a>.</p>
<p>Let us know if you have any other questions.</p>
<p>Thanks,<br>
Nicole</p></div>Nicoletag:help.tenderapp.com,2008-11-12:Comment/342656212014-08-25T14:24:46Z2014-08-25T14:24:46ZTender Widget from Link<div><p>Hey Milo,</p>
<p>JavaScript execution occurs as the page is loaded. In your
example, when the configuration is loaded (i.e. as the page is
being parsed), <code>document.getElementById('helplink')</code> is
not going to work because the link does not exist yet (since it's
lower than the script).</p>
<p>There are 2 ways to fix the problem:</p>
<ul>
<li>
<p>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.</p>
<pre>
<code><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></code>
</pre></li>
<li>
<p>Using a JS framework like jQuery, defer the scripts to the
DOMReady event:</p>
<pre>
<code>$(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);
});</code>
</pre></li>
</ul>
<p>Let me know how it goes.</p></div>Julientag:help.tenderapp.com,2008-11-12:Comment/342656212014-08-25T14:32:25Z2014-08-25T14:32:25ZTender Widget from Link<div><p>Thank you Julien! I was trying to fix this based on the previous
response and was going nuts when it wasn’t working!</p>
<p>This definitely solves the problem. Thank you so much!</p></div>Milo - Edikontag:help.tenderapp.com,2008-11-12:Comment/342656212014-08-25T14:34:08Z2014-08-25T14:34:08ZTender Widget from Link<div><p>No worries. The KB wasn't very clear about it, so I updated the
KB as well.</p></div>Julien