diff --git a/docs/features/replybyemail button.md b/docs/features/replybyemail button.md new file mode 100644 index 000000000..ead09cf67 --- /dev/null +++ b/docs/features/replybyemail button.md @@ -0,0 +1,67 @@ +--- +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); +} +```