Event Hooks

Event Hooks give you basic control over certain aspects of the Tether client by emitting and receiving javascript browser events. At the moment, we only offer hooks used to toggle Tether's visibility - but we plan to roll out additional hooks in the future.

Available Event Hooks

Hook Key Description Code Sample
tether.show Show the Tether floating action button.
window.dispatchEvent(new CustomEvent('tether.show'))
tether.hide Hide the Tether floating action button.
window.dispatchEvent(new CustomEvent('tether.hide'))
tether.toggle Toggle the visibility of the Tether floating action button.
window.dispatchEvent(new CustomEvent('tether.toggle'))
tether.feedback.submitted Event emitted by Tether when feedback is successfully submitted.
window.addEventListener('tether.feedback.submitted', () => { 
    /* Do some stuff here */
})

Usage Example

Using Tether event hooks is very simple, but may be unfamiliar to you if you don't have much experience with javascript browser events. I'll outline below a basic use-case case for event hooks in a scenario in which I want the Tether client to be invisible unless toggled on by a button in my web app's nav bar.

{alert.fa-info-circle} Before we continue, let's go to our Tether project settings and toggle off the "Visible by default" option. This will ensure that the Tether client is only visible when we dispatch our tether.show browser event.



Here's my web app - a simple job board. But it seems to have some pretty glaring bugs; there are broken images, mismatched buttons, and overlooked font colors. We'll report these issues using Tether, but as you can see the floating action button that is normally always visible, is nowhere to be found. That's because we only want the client to be visible when our users are actually reporting feedback. Let's wire up that "Report Issue" button in the nav bar to emit a tether.show event when clicked.



Let's modify the page's HTML to dispatch our event hook when the button is clicked.



Before:

...
<nav role="navigation" class="nav-menu w-nav-menu">
    <a href="/favorites" class="favorite-navbar-link w-inline-block">
        <div>Favorite Jobs</div>
        <div class="favorites-count jetboost-user-total-favorites-9o2r">2</div>
    </a>
    <a id="button-tether" class="navbar-button report-issue w-button">Report Issue</a> <!-- Here's our button -->
    <a href="/submit-job" class="navbar-button w-button">Submit a Job</a>
</nav>
...


After:

...
<nav role="navigation" class="nav-menu w-nav-menu">
    <a href="/favorites" class="favorite-navbar-link w-inline-block">
        <div>Favorite Jobs</div>
        <div class="favorites-count jetboost-user-total-favorites-9o2r">2</div>
    </a>
    <a 
        id="button-tether" 
        onclick="window.dispatchEvent(new CustomEvent('tether.show')) //Now we dispatch a tether.show event on click"
        class="navbar-button report-issue w-button"
    >
        Report Issue
    </a>
    <a href="/submit-job" class="navbar-button w-button">Submit a Job</a>
</nav>
...



There are other ways we can trigger this javascript event when the button is clicked though. Which one you use depends on the constraints of your development environment, application, and just your personal preferences. The code below achieves the same effect using declarative javascript.

If you're unable to use the onclick attribute for your trigger, here's another method of dispatching our event hook using a click listener on our button:

<script>
    (function emitTetherShowOnClick() {
        const button = document.querySelector('#button-tether');

        button.addEventListener('click', () => {
            window.dispatchEvent(new CustomEvent('tether.show'))
        });
    })();
</script>

{alert.fa-info-circle} Depending on where you place this code snippet, you may encounter DOM-loading race conditions. In order for our document.querySelector('#button-tether') to find the button, we need to make sure the DOM has finished loading. We can account for this by wrapping the code from above inside a DOMContentLoaded listener:

document.addEventListener('DOMContentLoaded', (event) => {
    const button = document.querySelector('#button-tether');

    button.addEventListener('click', () => {         window.dispatchEvent(new CustomEvent('tether.show'))     }); });


After implementing one of the changes outlined above, what we now expect to happen is for a tether.show event to be dispatched when we click the "Report Issue" button. Let's give that a try:



Awesome! :tada:


The Tether client is now visible so our user or team member can report a problem or suggest a change. Once the client is closed, the floating action button will automatically become invisible again, if this project is configured to be invisible by default. You can find that setting just above the Event Hooks section of your project settings page.