Feedback widget for Paligo

Add PushFeedback to a Paligo HTML5 output with a custom JavaScript file.

Prerequisites

• Permission to edit an HTML5 layout and publish your documentation.
• A PushFeedback project. Copy its ID from Snippet and replace <YOUR_PROJECT_ID> below.

Examples use @latest. Replace it with a version number to pin a release.

Installation

Floating button

Save this as pushfeedback.js:

function addFeedback() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.type = 'module';
  script.src =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
  document.head.appendChild(script);

  const widget = document.createElement('feedback-button');
  widget.setAttribute('project', '<YOUR_PROJECT_ID>');
  widget.setAttribute('button-position', 'bottom-right');
  widget.setAttribute('modal-position', 'sidebar-right');
  widget.setAttribute('button-style', 'dark');
  widget.textContent = 'Feedback';
  document.body.appendChild(widget);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', addFeedback, { once: true });
} else {
  addFeedback();
}

Open Layout, select your HTML5 layout, then open CSS, JS, logos and other assets. Under Custom Javascript, click Upload, select the file, and click Save. Publish with that layout. See Paligo JavaScript customization for the upload controls.

Inline button

Save this as pushfeedback.js:

function addFeedback() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.type = 'module';
  script.src =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
  document.head.appendChild(script);

  const widget = document.createElement('feedback-button');
  widget.setAttribute('project', '<YOUR_PROJECT_ID>');
  widget.setAttribute('button-position', 'default');
  widget.setAttribute('screenshot-positioning', 'true');
  widget.setAttribute('modal-position', 'center');
  widget.setAttribute('button-style', 'dark');
  widget.textContent = 'Feedback';
  (document.querySelector('.topic') || document.body).appendChild(widget);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', addFeedback, { once: true });
} else {
  addFeedback();
}

Open Layout, select your HTML5 layout, then open CSS, JS, logos and other assets. Under Custom Javascript, click Upload, select the file, and click Save. Publish with that layout. See Paligo JavaScript customization for the upload controls.

Embedded form

Save this as pushfeedback.js:

function addFeedback() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.type = 'module';
  script.src =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
  document.head.appendChild(script);

  const widget = document.createElement('feedback-modal');
  widget.setAttribute('project', '<YOUR_PROJECT_ID>');
  widget.setAttribute('embedded', 'true');
  (document.querySelector('.topic') || document.body).appendChild(widget);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', addFeedback, { once: true });
} else {
  addFeedback();
}

Open Layout, select your HTML5 layout, then open CSS, JS, logos and other assets. Under Custom Javascript, click Upload, select the file, and click Save. Publish with that layout. See Paligo JavaScript customization for the upload controls.

Like and dislike buttons

Save this as pushfeedback.js:

function addFeedback() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.type = 'module';
  script.src =
    'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
  document.head.appendChild(script);

  const target = document.querySelector('.topic') || document.body;
  const prompt = document.createElement('p');
  prompt.textContent = 'Was this page helpful?';
  const row = document.createElement('div');
  row.className = 'pushfeedback-thumbs-row';
  target.append(prompt, row);
  const icons = {
    1: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 2a3.13 3.13 0 0 1 4 3.88Z"/></svg>',
    0: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H21a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L13 22a3.13 3.13 0 0 1-4-3.88Z"/></svg>',
  };
  for (const [rating, label] of [
    ['1', 'Helpful'],
    ['0', 'Not helpful'],
  ]) {
    const button = document.createElement('feedback-button');
    button.setAttribute('project', '<YOUR_PROJECT_ID>');
    button.setAttribute('rating', rating);
    button.setAttribute('button-position', 'default');
    button.setAttribute('button-style', 'default');
    button.setAttribute('hide-icon', 'true');
    button.setAttribute('screenshot-positioning', 'true');
    button.innerHTML =
      icons[rating] + `<span class="pushfeedback-thumb-label">${label}</span>`;
    row.appendChild(button);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', addFeedback, { once: true });
} else {
  addFeedback();
}

Open Layout, select your HTML5 layout, then open CSS, JS, logos and other assets. Under Custom Javascript, click Upload, select the file, and click Save. Publish with that layout. See Paligo JavaScript customization for the upload controls.

Alternative: Using Custom CSS/JS Files

The examples above use Paligo's JavaScript upload. If the layout already has custom JavaScript, merge the selected example into that file before uploading it.

Other installation modes

Each example loads its own stylesheet and runtime. Inline modes append the widget to the first .topic element, or the page body if none exists. Change the selector for a different location.

Verify the installation

Open a published topic and send a test message. Confirm it appears in your PushFeedback project. Check allowed URLs if submission fails.

Next steps

See Layout, Styles, and Text for options.