Embeddable widget (JS, React)

Embed Squeak! into any page of your site with a JavaScript embed or React component.

Threads

The Squeak! widget appears wherever it’s embedded. When a user loads the page, Squeak! loads in any threads asked on that page.

Find your Squeak! embed code on the settings page. If you’re using React, grab the squeak-react snippet instead. (You’ll need to copy a few variables from the standard JavaScript snippet.)

Roles

There are two badges that can appear next to a user’s name:

• Author
  • Displays when the original poster replies to the thread
• Moderator
  • Users whose roles are set to Moderator or Admin in the admin portal will be displayed with the Moderator badge. This lets visitors know the answer is authoritative.
  • Note: Throughout this documentation, when referring to “Moderators”, this includes moderators and admins (as set in the admin portal.

Marking an answer as the accepted solution

Authors and moderators can choose an answer as the official solution to the question. This does two things:

1. Makes the answer visually distinctive so it stands out to users
2. Closes the thread to further answers

Re-opening a closed thread

Authors and moderators can “undo” the closing of a thread to allow more responses. This also removes the special indication of the previously accepted solution.

Posting

The post editor works the same way for original questions as responses, with the only exception being that new posts include a title field.

Post titles (required)

Titles are used for:

• Providing a short description when listed on a webpage
• Automatically setting the slug for a question’s permalink page (coming soon)

A question can be posted without a description, provided it fits within the character limit (50 characters).

Titles do not support rich text or Markdown.

Post details (optional) & Markdown support

This field is intended for describing a question in more detail. It supports some Markdown formatting:

• Bold text
• Italicizing text
• Block-level code snippets
• Adding links
• Embed externally hosted images

Support for image uploading is on the roadmap.

Authentication

Posting a question or reply requires authentication to prevent anonymous spam. Currently the only method of authentication is through Supabase, which is Squeak!’s database and authentication service. (We plan to offer other authentication methods in the future.)

Customization

Set color variables in CSS to override default colors. Here are all the options and how to use them.

Some fields require converting HEX color values to RGB and separating the values with commas. Sometimes we insert the value of this string into an rgba color and add our own level of opacity from the defined colors.

<style>
  :root {
    /* COLORS */
    --squeak-button-color: 29, 74, 255;           /* rgb triplet, no hex */
    --squeak-primary-color: 0, 0, 0;              /* rgb triplet, no hex, used for text */
    --squeak-default-avatar-fill: 255, 255, 255;  /* when there's no avatar, this is the fill color behind the gray avatar (should match your background)
    --squeak-warning-color: #FFF7E9;              /* for form warnings or errors */
    --squeak-thread-border-style: dashed;         /* thread lines that tie replies to questions */
    --squeak-input-text-color: 0, 0, 0;           /* rgb triplet, useful on dark input backgrounds */
    --squeak-input-background-color: transparent; /* hex, rgb, rgba */
    /* SIZING */
    --squeak-border-radius: .25rem;               /* adjusts all radii proportionally */
    --squeak-base-font-size: 16px;                /* eg: decrease 1px to scale down all text */
    /* OTHER */
    --squeak-link-text-decoration: underline;     /* none | underline | dashed | etc */
    --squeak-button-weight: bold;                 /* normal | bold | 600 | etc */
  }
</style>