mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-20 11:24:05 -06:00
68 lines
2.4 KiB
Markdown
68 lines
2.4 KiB
Markdown
---
|
|
title: Reply by Email Button
|
|
tags:
|
|
- component
|
|
---
|
|
|
|
The Reply By Email Button is a feature that allows users to display a button under their notes, allowing visitors to send them an email to an obfuscated email address.
|
|
- 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:
|
|
```ts
|
|
Component.ReplyByEmail({
|
|
username: "Y29udGFjdA==", // "contact" encoded in base64, as in contact@example.com
|
|
domain: "ZXhhbXBsZS5jb20=", // "example.com" encoded in base64, as in contact@example.com
|
|
}),
|
|
```
|
|
You can specify under which notes to display the button by adding the following:
|
|
```ts
|
|
includeTitles: ["Welcome to Quartz 4", "Reply by Email Button"],
|
|
```
|
|
Alternatively, you can include the button by default by ommiting the `includeTitles` line, and specify notes under which the button should not be displayed:
|
|
```ts
|
|
excludeTitles: ["Welcome to Quartz 4", "Home"],
|
|
```
|
|
You can also override the default `buttonLabel` text:
|
|
```ts
|
|
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:
|
|
|
|
```ts
|
|
afterBody: [
|
|
Component.ReplyByEmail({
|
|
username: "Y29udGFjdA==", // "contact" encoded in base64, as in contact@example.com
|
|
domain: "ZXhhbXBsZS5jb20=", // "example.com" encoded in base64, as in contact@example.com
|
|
// 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:
|
|
|
|
```scss
|
|
.reply-by-email-button {
|
|
color: var(--tertiary);
|
|
}
|
|
```
|