> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Basic back-end to front-end explained

# ${color}[#314AF3](Overview)

This page shows the current backend-to-frontend workflow in Stylish Cost Calculator. Use the header controls to rename strings (Wordings), open support/chat, follow the guided tours, and access Email Quote, Payment, and global settings.

# ${color}[#314AF3](Back-end flow)

1. Create or open a calculator from the dashboard.
2. Use the header icons:
   - Wordings: rename labels without coding.
   - Tours: play the guided tour for a quick walkthrough.
   - Email Quote & Payment: configure quote emails and payment options.
   - Save/Preview: save, then click Preview to open the live front-end view.
3. Add elements, set prices/logic, and save.

# ${color}[#314AF3](Front-end preview & embed)

- Preview: opens the live calculator with the current settings.
- Embed: copy the shortcode or use the Gutenberg block/Elementor widget to place the calculator on a page.
- Smart URL: use the generated link for a direct share or A/B variations.

# ${color}[#314AF3](Tips)

- Use the template loader to start from a prebuilt industry template.
- If changes are not showing, clear cache/optimization plugins or use Compatibility Mode.