Skip to main content
Time: 25 minutes | Level: Expert
Prerequisites: Building Price Calculators, Widget Sharing
Requires: Pro plan or higher

​
What You’ll Learn

  • Design client-facing calculators and tools
  • Embed widgets on your website
  • Brand and customize the experience
  • Automate quote delivery with webhooks

​
The Client Tool Vision

Transform your business knowledge into self-service tools: Use Cases:
  • Instant pricing quotes
  • Service configurators
  • Availability checkers
  • Estimate generators

​
Step 1: Create Your Calculator

Build on the Knowledge Base foundation:
1

Upload Source Data

Add your price list, rate card, or service catalog to Knowledge Base.Best formats:
  • Excel with clear headers
  • PDF price tables
  • CSV exports from your system
2

Extract Structure

Let AI identify dimensions and values:
  • Dimensions: Size, Material, Quantity, Service Level
  • Values: Prices, rates, multipliers
3

Create Calculator Helper

Generate a Price Calculator that:
  • Shows dropdowns for each dimension
  • Has quantity input
  • Auto-calculates total
4

Test Thoroughly

Verify calculations match your source data. Check edge cases (min/max quantities, special materials).

​
Step 2: Design for Clients

Optimize the client experience:

​
Field Optimization

DoDon’t
Use clear labels: “Paper Size”Internal codes: “SKU_001”
Helpful descriptions: “Choose your desired finish”Jargon: “Select substrate coating”
Logical order: Size → Material → QuantityRandom field order
Sensible defaults: Most popular optionBlank required fields

​
Visual Polish

Rename fields for client understanding:Internal: paper_gsm
Client-facing: “Paper Weight”Internal: finishing_type
Client-facing: “Finish Style”

​
Step 3: Configure Widget Sharing

1

Open Share Settings

Go to your calculator → Share button → Widget Mode
2

Enable Anonymous Access

Toggle Allow anonymous view so clients don’t need accounts.
3

Customize Appearance

  • Choose light/dark theme
  • Set accent color to match your brand
  • Configure which fields are visible
4

Get Embed Code

Copy the iframe code for your website:
<iframe 
  src="https://peanuts.app/w/YOUR_TOKEN"
  width="100%"
  height="500"
  frameborder="0"
  style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
></iframe>

​
Step 4: Embed on Your Website

​
Basic Embed

<div class="calculator-container">
  <h2>Get an Instant Quote</h2>
  <iframe 
    src="https://peanuts.app/w/abc123"
    width="100%"
    height="500"
    frameborder="0"
  ></iframe>
</div>

​
Responsive Embed

<style>
  .peanuts-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  .peanuts-wrapper iframe {
    width: 100%;
    height: 550px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  @media (max-width: 768px) {
    .peanuts-wrapper iframe {
      height: 650px;
    }
  }
</style>

<div class="peanuts-wrapper">
  <iframe src="https://peanuts.app/w/abc123"></iframe>
</div>

​
Landing Page Integration

<section class="pricing-section">
  <div class="container">
    <h2>Calculate Your Price in Seconds</h2>
    <p>Select your options below for an instant quote.</p>
    
    <div class="calculator-embed">
      <iframe src="https://peanuts.app/w/abc123"></iframe>
    </div>
    
    <p class="disclaimer">
      * Prices are estimates. Final quote may vary based on specifications.
    </p>
  </div>
</section>

​
Step 5: Automate Quote Delivery

Connect webhooks for seamless follow-up:

​
Capture Contact Info

Add fields to your calculator:
  • Client Name (text, required)
  • Email (text, required)
  • Phone (text, optional)
  • Notes (text, multiline)

​
Webhook Handler

async function handleQuoteRequest(event: WebhookEvent) {
  const { data } = event.entry;
  
  // Extract quote details
  const quote = {
    client_name: data.client_name,
    email: data.email,
    specifications: {
      size: data.size,
      material: data.material,
      quantity: data.quantity
    },
    calculated_price: data.calculated_price,
    submitted_at: event.timestamp
  };
  
  // 1. Save to CRM
  await crm.createLead({
    name: quote.client_name,
    email: quote.email,
    source: 'Website Calculator',
    value: quote.calculated_price
  });
  
  // 2. Send confirmation email
  await email.send({
    to: quote.email,
    template: 'quote-confirmation',
    data: quote
  });
  
  // 3. Notify sales team
  await slack.post({
    channel: '#new-quotes',
    text: `New quote: ${quote.client_name} - $${quote.calculated_price}`
  });
}

​
Email Template Example

Subject: Your Quote from [Company Name]

Hi {{client_name}},

Thanks for using our instant quote calculator!

Your Quote Details:
-------------------
Size: {{size}}
Material: {{material}}
Quantity: {{quantity}}

Estimated Price: ${{calculated_price}}

This quote is valid for 30 days. Ready to proceed?
Reply to this email or call us at [phone].

Best regards,
[Your Company]

​
Advanced Patterns

​
Multi-Product Calculators

Create separate calculators for product lines, link from a landing page: 
<div class="product-calculators">
  <div class="calculator-card">
    <h3>Business Cards</h3>
    <iframe src="https://peanuts.app/w/cards"></iframe>
  </div>
  
  <div class="calculator-card">
    <h3>Brochures</h3>
    <iframe src="https://peanuts.app/w/brochures"></iframe>
  </div>
  
  <div class="calculator-card">
    <h3>Posters</h3>
    <iframe src="https://peanuts.app/w/posters"></iframe>
  </div>
</div>

​
QR Code Distribution

Generate QR codes for:
  • Trade show displays
  • Product packaging
  • Business cards
  • Print advertisements
Clients scan → instant calculator access on mobile.

​
Password-Protected Tools

For B2B clients with negotiated pricing:
  1. Enable Password Protection in widget settings
  2. Share password with specific clients
  3. They enter password to access their custom rates

​
Measuring Success

Track calculator performance:
MetricHow to Measure
ViewsWebsite analytics on embed page
CompletionsWebhook count for entries with email
Conversion RateCompletions ÷ Views
Average Quote ValueSum of calculated_price ÷ count
Response TimeTime from quote to sale

​
Insights from Ask Peanuts

Query your calculator data:
  • “What’s the most requested paper size this month?”
  • “Average quote value for brochure orders”
  • “Show me quotes over $500 from this week”

​
Exercise

Practice: Launch a Client Calculator

Build and deploy a client-facing tool:
  1. Create calculator from your price list (or sample data)
  2. Optimize fields with client-friendly labels and descriptions
  3. Configure widget with anonymous access
  4. Create test page with embedded calculator
  5. Set up webhook to receive submissions (use webhook.site for testing)
  6. Submit 3 test quotes and verify webhook delivery
Bonus: Style the embed container to match a brand

​
Key Takeaways

Remember: Client tools should be self-explanatory, mobile-friendly, and connected to your workflow via webhooks. Test thoroughly before launching.

​
Checklist Before Launch

1

Data Accuracy

✅ Prices match source documents
✅ All dimension combinations work
✅ Edge cases handled (min/max quantities)
2

User Experience

✅ Clear, non-technical labels
✅ Helpful descriptions
✅ Logical field order
✅ Mobile responsive
3

Integration

✅ Webhook connected and tested
✅ Email notifications working
✅ CRM sync verified
4

Legal

✅ Disclaimer about estimate accuracy
✅ Privacy policy link if collecting email
✅ Terms of service reference

​
Next Steps

Widget Sharing

Deep dive into sharing options

Webhooks Reference

Complete webhook documentation