quartz/docs/features/replybyemail button.md

title	tags
Reply by Email Button	component

The Reply By Email Button is a feature that allows users to display a button under their notes, allowing visitors to comment or submited feedback for your notes via email.

• The email address is base64 encoded to provide some basic protection from bots.
• The subject line of the email will be taken from the page title where the button is clicked.
• You can specify on what notes the button should be displayed or excluded.
• The label on the button can also be customised.

Configuration

The Reply By Email Button is disabled by default. To enable it, you can add the component to your layout configuration in quartz.layout.ts.

Minimal configuration:

Component.ReplyByEmail({
  email: "contact@example.com"
}),

You can specify under which notes to display the button by adding the following:

includeTitles: ["Welcome to Quartz 4", "Reply by Email Button", "Contact"],

Alternatively, you can include the button by default by ommiting the includeTitles line, and specify notes under which the button should not be displayed:

excludeTitles: ["Welcome to Quartz 4", "Home"],

You can also override the default buttonLabel text:

buttonLabel: "Reply by email"

Usage

The natural placement for the Reply By Email Button is within afterBody in the Content Pages, so that it is displayed right under the note:

  afterBody: [
    Component.ReplyByEmail({
      email: "contact@example.com", // The email address to be linked to
      // includeTitles: ["Welcome to Quartz 4"], // You can specify which page titles to include or comment out the line to include on all pages
      excludeTitles: ["Welcome to Quartz 4", "Home"],  // You can specify which page titles to exclude when includeTitles is empty
      buttonLabel: "Submit feedback by email" // You can override the default button text "Reply by email"
    }),
  ],

Customization

You can customize the appearance of the ReplyByEmail button through CSS variables and styles. The component uses the following class:

• .reply-by-email-button

Example customization in your custom CSS:

.reply-by-email-button {
  color: var(--tertiary);
}