Custom Trigger Buttons

Use your own buttons, links, menus, or keyboard shortcuts to open a specific Signalog panel.

The current widget does this through the global SignalogPlugin.openWidget() API.

Declarative HTML attributes such as data-signalog-trigger="bugReport" are planned, but they are coming soon and are not active in the current signalog.plug bundle.

Trigger keys

These are the trigger keys supported by the current signalog.plug app:

Trigger key	Opens
feedback	General feedback form
bugReport	Bug report form
featureRequest	Feature request form
changeLogs	Changelog / updates view

Plain HTML

<button onclick="SignalogPlugin.openWidget({ trigger: 'feedback' })">
  Share feedback
</button>

<button onclick="SignalogPlugin.openWidget({ trigger: 'bugReport' })">
  Report bug
</button>

<button onclick="SignalogPlugin.openWidget({ trigger: 'featureRequest' })">
  Request feature
</button>

<button onclick="SignalogPlugin.openWidget({ trigger: 'changeLogs' })">
  View changelog
</button>

Coming soon: no-JS data triggers

This is the planned declarative API, but do not use it in production until the widget release notes say it has shipped:

<button data-signalog-trigger="feedback">Share feedback</button>
<button data-signalog-trigger="bugReport">Report bug</button>
<button data-signalog-trigger="featureRequest">Request feature</button>
<button data-signalog-trigger="changeLogs">View changelog</button>

Links and custom elements

For anchors, prevent navigation before opening the widget.

<a
  href="#feedback"
  onclick="event.preventDefault(); SignalogPlugin.openWidget({ trigger: 'feedback' })"
>
  Give feedback
</a>

<div
  role="button"
  tabindex="0"
  onclick="SignalogPlugin.openWidget({ trigger: 'bugReport' })"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') SignalogPlugin.openWidget({ trigger: 'bugReport' })"
>
  Something broken?
</div>

React / JSX

function HelpMenu() {
  return (
    <div>
      <button onClick={() => window.SignalogPlugin?.openWidget({ trigger: 'feedback' })}>
        Share feedback
      </button>

      <button onClick={() => window.SignalogPlugin?.openWidget({ trigger: 'bugReport' })}>
        Report bug
      </button>

      <button onClick={() => window.SignalogPlugin?.openWidget({ trigger: 'featureRequest' })}>
        Request feature
      </button>

      <button onClick={() => window.SignalogPlugin?.openWidget({ trigger: 'changeLogs' })}>
        View changelog
      </button>
    </div>
  )
}

Vue

<script setup lang="ts">
function openSignalog(trigger: 'feedback' | 'bugReport' | 'featureRequest' | 'changeLogs') {
  window.SignalogPlugin?.openWidget({ trigger })
}
</script>

<template>
  <button @click="openSignalog('feedback')">Share feedback</button>
  <button @click="openSignalog('bugReport')">Report bug</button>
</template>

Svelte

<button on:click={() => window.SignalogPlugin?.openWidget({ trigger: 'featureRequest' })}>
  Request feature
</button>

Hide the default floating button

If you want users to open Signalog only from your own UI, hide the default floating button:

window.SignalogPlugin.showTrigger.value = false

You can also hide it from the script tag at boot:

<script
  async
  src="https://cdn.signalog.co/widget.js"
  data-site-id="YOUR_SITE_ID"
  data-trigger="none"
></script>

Open in a specific display mode

The same trigger can open in a modal, floating window, or drawer.

SignalogPlugin.openWidget({
  mode: 'modal',
  trigger: 'bugReport',
})

SignalogPlugin.openWidget({
  mode: 'drawer',
  position: 'left',
  trigger: 'changeLogs',
})

Safe loading pattern

The widget script is loaded asynchronously. If your button may be clicked before the script is ready, guard the call.

function openSignalog(options) {
  if (window.SignalogPlugin) {
    window.SignalogPlugin.openWidget(options)
    return
  }

  console.warn('SignalogPlugin is not ready yet')
}

Next steps

• JavaScript API ->
• TypeScript support ->