> ## Documentation Index
> Fetch the complete documentation index at: https://docs.peanutsapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Building Client Tools

> Create self-service tools and portals for your clients

<Info>
  **Time:** 25 minutes | **Level:** Expert\
  **Prerequisites:** [Building Price Calculators](/tutorials/advanced/building-price-calculators), [Widget Sharing](/features/widget-sharing)\
  **Requires:** Pro plan or higher
</Info>

## 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:

```mermaid theme={null}
flowchart LR
    A[Your Price List] -->|Upload| B[Knowledge Base]
    B -->|Extract| C[Price Calculator]
    C -->|Share as Widget| D[Your Website]
    D -->|Client Uses| E[Automated Quote]
    E -->|Webhook| F[Your CRM/Email]
```

**Use Cases:**

* Instant pricing quotes
* Service configurators
* Availability checkers
* Estimate generators

***

## Step 1: Create Your Calculator

Build on the Knowledge Base foundation:

<Steps>
  <Step title="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
  </Step>

  <Step title="Extract Structure">
    Let AI identify dimensions and values:

    * **Dimensions:** Size, Material, Quantity, Service Level
    * **Values:** Prices, rates, multipliers
  </Step>

  <Step title="Create Calculator Helper">
    Generate a Price Calculator that:

    * Shows dropdowns for each dimension
    * Has quantity input
    * Auto-calculates total
  </Step>

  <Step title="Test Thoroughly">
    Verify calculations match your source data.
    Check edge cases (min/max quantities, special materials).
  </Step>
</Steps>

***

## Step 2: Design for Clients

Optimize the client experience:

### Field Optimization

| Do                                                 | Don't                              |
| -------------------------------------------------- | ---------------------------------- |
| Use clear labels: "Paper Size"                     | Internal codes: "SKU\_001"         |
| Helpful descriptions: "Choose your desired finish" | Jargon: "Select substrate coating" |
| Logical order: Size → Material → Quantity          | Random field order                 |
| Sensible defaults: Most popular option             | Blank required fields              |

### Visual Polish

<Tabs>
  <Tab title="Labels">
    Rename fields for client understanding:

    **Internal:** `paper_gsm`\
    **Client-facing:** "Paper Weight"

    **Internal:** `finishing_type`\
    **Client-facing:** "Finish Style"
  </Tab>

  <Tab title="Descriptions">
    Add helper text:

    "**Matte:** Elegant, non-reflective finish perfect for photography"

    "**Gloss:** High-shine finish that makes colors pop"
  </Tab>

  <Tab title="Defaults">
    Pre-select common choices:

    * Most popular size
    * Standard material
    * Minimum quantity

    Reduces decision fatigue for new clients.
  </Tab>
</Tabs>

***

## Step 3: Configure Widget Sharing

<Steps>
  <Step title="Open Share Settings">
    Go to your calculator → **Share** button → **Widget Mode**
  </Step>

  <Step title="Enable Anonymous Access">
    Toggle **Allow anonymous view** so clients don't need accounts.
  </Step>

  <Step title="Customize Appearance">
    * Choose light/dark theme
    * Set accent color to match your brand
    * Configure which fields are visible
  </Step>

  <Step title="Get Embed Code">
    Copy the iframe code for your website:

    ```html theme={null}
    <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>
</Steps>

***

## Step 4: Embed on Your Website

### Basic Embed

```html theme={null}
<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

```html theme={null}
<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

```html theme={null}
<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

```typescript theme={null}
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:

```html theme={null}
<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:

| Metric              | How to Measure                       |
| ------------------- | ------------------------------------ |
| Views               | Website analytics on embed page      |
| Completions         | Webhook count for entries with email |
| Conversion Rate     | Completions ÷ Views                  |
| Average Quote Value | Sum of calculated\_price ÷ count     |
| Response Time       | Time 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

<Card title="Practice: Launch a Client Calculator" icon="dumbbell">
  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
</Card>

***

## Key Takeaways

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

***

## Checklist Before Launch

<Steps>
  <Step title="Data Accuracy">
    ✅ Prices match source documents\
    ✅ All dimension combinations work\
    ✅ Edge cases handled (min/max quantities)
  </Step>

  <Step title="User Experience">
    ✅ Clear, non-technical labels\
    ✅ Helpful descriptions\
    ✅ Logical field order\
    ✅ Mobile responsive
  </Step>

  <Step title="Integration">
    ✅ Webhook connected and tested\
    ✅ Email notifications working\
    ✅ CRM sync verified
  </Step>

  <Step title="Legal">
    ✅ Disclaimer about estimate accuracy\
    ✅ Privacy policy link if collecting email\
    ✅ Terms of service reference
  </Step>
</Steps>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Widget Sharing" href="/features/widget-sharing" icon="share">
    Deep dive into sharing options
  </Card>

  <Card title="Webhooks Reference" href="/features/webhooks" icon="bolt">
    Complete webhook documentation
  </Card>
</CardGroup>