--- title: "Basic HTML Snippets for Your Knowledge Base" url: "https://help.productfruits.com/en/article/basic-html-snippets-for-your-knowledge-base" language: "en" last_updated: "2026-09-24T13:54:16.834Z" --- # Basic HTML Snippets for Your Knowledge Base The article editor lets you paste your own HTML and CSS into an HTML Snippet block. This article collects ready-made elements you can copy into your own knowledge base. Each example shows the finished element first. Open **Show HTML code** under it to get the code. ## How It Works 1. **Copy the Code.** Click Copy Code under any example below. 2. **Replace the Highlighted Text.** Open Show HTML Code to see what each placeholder is for, then swap it for your own text, link or image. 3. **Paste It Into Your Article.** Add an HTML Snippet block and paste. The new editor shows the result right away; in the legacy editor, open the preview. **Good to Know:** Snippets use your knowledge base font and only style themselves, so nothing else on the page changes. To match your brand, change the colors at the top of each `
Tip: {{TIP_TEXT}}
Note: {{NOTE_TEXT}}
Important: {{IMPORTANT_TEXT}}
``` ### At-a-Glance Box Three quick facts at the top of a how-to, so readers know right away if the article is for them. Time Needed 5 Minutes Who Can Do This Article Editors Coding None Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{LABEL_1}}` and so on: the small label, like Time Needed or Plan. - `{{VALUE_1}}` and so on: the value under it. - More or fewer: add or delete a whole `
` line. ```
{{LABEL_1}}
{{VALUE_1}}
{{LABEL_2}}
{{VALUE_2}}
{{LABEL_3}}
{{VALUE_3}}
``` ### Tooltip Explains a term when readers hover over it or tap it. Turn on SSOSingle Sign-On: lets users access multiple apps with one login. so your team can sign in with their company account. Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{TERM}}` The word with the dashed underline. - `{{DEFINITION}}` The text in the bubble. - Put the `` inside your own sentence, in the same snippet as the ` {{TERM}}{{DEFINITION}} ``` ### Keyboard Keys Shows shortcuts as the keys readers are about to press. Press Ctrl + V to paste, or ⌘ + V on a Mac. Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{KEY_1}}`, `{{KEY_2}}` One key per box. Copy a `` tag for a third key. - `{{REST_OF_SENTENCE}}` The rest of your sentence, like “to save”. ```

Press {{KEY_1}} + {{KEY_2}} {{REST_OF_SENTENCE}}

``` ## Give Content Structure ### FAQ Dropdown A question readers click to reveal the answer. Why Do Roles Matter? Does it make sense to welcome a billing manager the same way you welcome a content creator? Segmenting content by user role shows people what's relevant to them, which makes your application more valuable right away. Do I Need a Developer for This? No. Copy the code, replace the highlighted text and paste it into an HTML Snippet block. Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{QUESTION}}` The question readers click. - `{{ANSWER}}` The answer. Add more `

` tags for more paragraphs. - More questions: copy the whole `

` block. You only need the `
{{QUESTION}}

{{ANSWER}}

``` ### Numbered Steps Instructions that need to happen in order. The numbers count themselves. 1. **Copy the Code**Open Show HTML Code under any example and click Copy Code. 2. **Replace the Orange Text**Swap every placeholder for your own text. 3. **Paste It Into Your Article**Add an HTML Snippet block and paste the code. Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{STEP_1_TITLE}}` and the other titles: a short name for each step. - `{{STEP_1_TEXT}}` and the other texts: what to do in that step. - More steps: copy a whole `
  • ` line. ```
    1. {{STEP_1_TITLE}}{{STEP_1_TEXT}}
    2. {{STEP_2_TITLE}}{{STEP_2_TEXT}}
    3. {{STEP_3_TITLE}}{{STEP_3_TEXT}}
    ``` ### Dos and Don'ts ✓ Do - Show a hint when the user reaches that part of the app - Use the words your users use in support tickets - Watch one new person try it before launch ✕ Don't - Open a modal, a checklist and a tour on first login - Name features the way your team does internally - Add a tooltip to every button on the screen Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{DO_TITLE}}`, `{{DONT_TITLE}}` The headings, like Do and Don't, or Before and After. - `{{DO_ITEM_1}}` and so on: one point per line. Add or delete `
  • ` lines as needed. ```

    ✓ {{DO_TITLE}}

    • {{DO_ITEM_1}}
    • {{DO_ITEM_2}}
    • {{DO_ITEM_3}}

    ✕ {{DONT_TITLE}}

    • {{DONT_ITEM_1}}
    • {{DONT_ITEM_2}}
    • {{DONT_ITEM_3}}
    ``` ### Buttons For the next thing readers should do: a main button and an optional second one. [Book a Demo](https://help.productfruits.com/en/article/basic-html-snippets-for-your-knowledge-base#) [Talk to Support](https://help.productfruits.com/en/article/basic-html-snippets-for-your-knowledge-base#) Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{MAIN_URL}}`, `{{SECOND_URL}}` Where each button leads, starting with https://. - `{{MAIN_TEXT}}`, `{{SECOND_TEXT}}` What each button says. - One button only? Delete the `` line you don't need. ```
    {{MAIN_TEXT}} {{SECOND_TEXT}}
    ``` ### Last Updated Shows readers when the article was last changed. Update the date when you edit. Last Updated: **October 20, 2025** Show HTML CodeHide HTML Code Replace the Highlighted Text - `{{DATE}}` The date of your last change. ```
    Last Updated: {{DATE}}
    ```