Demo 1: Default

Frequently Asked Questions

How do I install this widget?

Add one line of code to your website. Copy the embed code from your TradeCalcs dashboard and paste it into your HTML. The widget will initialize automatically.

Does it work on mobile?

Yes! The widget is fully responsive and works perfectly on all screen sizes. Touch interactions are supported, and the widget will adapt to your device's screen.

Can I customize the colors?

Absolutely. Use CSS custom properties (variables) to match your brand. You can customize background colors, text colors, borders, border radius, and more.

Is it accessible?

Yes. The widget is keyboard accessible (Space/Enter to toggle), includes proper ARIA attributes for screen readers, and respects the user's reduced-motion preferences.

Demo 2: Accordion Mode

Pricing Questions

What is the pricing?

Static widgets like this FAQ accordion are available for $19 one-time purchase. You own them forever with no monthly fees.

Are there any monthly fees?

For static widgets: No. For hosted calculators with lead capture: 12 months included, then optional $49-99/year renewal for hosted delivery service.

What's included?

You get the widget code, installation instructions, and lifetime updates. For hosted services, you also get email notifications, webhook delivery, and technical support.

Demo 3: Plus/Minus Icon

Technical Details

What are the dependencies?

Zero. This is pure vanilla JavaScript with no external dependencies. No jQuery, no React, no build tools required.

What's the file size?

The JavaScript is ~3.5KB minified. The CSS is ~2KB minified. Total payload under 6KB for both files combined.

Does it work in older browsers?

It works in all modern browsers (Chrome, Firefox, Safari, Edge). For IE11 support, you would need to polyfill some ES6 features, but IE11 is officially retired.

Demo 4: Custom Theme

Contractor Questions

Can I use this on client websites?

Yes, with our Agency plan. You get reseller rights to install widgets on multiple client sites with white-label embedding.

How do I get support?

Email support@tradecalcs.com or use the contact form on our website. We typically respond within 24 hours on business days.

Can I request custom features?

Yes! We offer custom development services for specialized calculators, integrations, or modifications. Contact us for a quote.

How to Install

Step 1: Add the CSS and JS files

<!-- Replace d7879159.tradecalcs.pages.dev with tradecalcs.com once production domain is configured -->
<link rel="stylesheet" href="https://d7879159.tradecalcs.pages.dev/widgets/faq-accordion.css">
<script src="https://d7879159.tradecalcs.pages.dev/widgets/faq-accordion.js"></script>

Step 2: Add your FAQ HTML

<div data-tradecalcs-faq>
  <div data-faq-item>
    <div data-faq-q>Your question here?</div>
    <div data-faq-a>
      <p>Your answer here.</p>
    </div>
  </div>

  <!-- Add more items... -->
</div>

Customization Options

<div data-tradecalcs-faq
     data-single-open="true"   <!-- Only one open at a time -->
     data-open-first="true"    <!-- Auto-open first item -->
     data-icon="plus"          <!-- Icon: chevron, plus, or none -->
     data-speed="300">         <!-- Animation speed in ms -->
  ...
</div>

CSS Custom Properties (Theming)

:root {
  --tc-faq-bg: #ffffff;
  --tc-faq-border: #e5e7eb;
  --tc-faq-question-color: #111827;
  --tc-faq-answer-color: #4b5563;
  --tc-faq-hover-bg: #f9fafb;
  --tc-faq-icon-color: #6b7280;
  --tc-faq-radius: 8px;
  --tc-faq-spacing: 1rem;
}

FAQ Accordion Widget