3. Embedding your Calculator

Once your calculator is configured, you need to make it accessible to customers. TailorQuote offers two display modes: embedding as a widget on your website, or sharing as a standalone page.

Choosing Your Display Mode

In your calculator configuration, navigate to the Share & Embed section at the bottom of the page.

Embedded Widget

Best for businesses with existing websites:

• Integrates seamlessly into your site
• Maintains your navigation and branding
• Customers stay on your domain

Shareable Link

Perfect for quick deployment:

• No website required
• Instant public URL
• Great for social media and email campaigns

Setting Display Mode

1. Open your calculator configuration
2. Scroll to Share & Embed section
3. Select from the dropdown:
   • Embedded (widget for your website)
   • Shareable Link (standalone page)

Embedding on Your Website

When you select "Embedded" mode, TailorQuote provides a simple script tag.

Step 1: Copy the Embed Code

The embed code looks like this:

<!-- TailorQuote Calculator Widget -->
<script src="https://yourdomain.com/widget/tailorquote-widget.js" 
        data-calculator="your-calculator-id" 
        async defer>
</script>

Click Copy Embed Code to copy it to your clipboard.

Step 2: Add to Your Website

Basic Installation

Paste the script tag where you want the calculator to appear:

<div class="quote-section">
  <h2>Get an Instant Quote</h2>
  <p>Calculate your project cost in seconds.</p>
  
  <!-- Calculator appears here -->
  <script src="https://yourdomain.com/widget/tailorquote-widget.js" 
          data-calculator="your-calculator-id" 
          async defer>
  </script>
</div>

Using a Container

For more control over placement, create a container:

<!-- Place this where you want the calculator -->
<div id="tailorquote-widget-container"></div>

<!-- Script can go anywhere on the page -->
<script src="https://yourdomain.com/widget/tailorquote-widget.js" 
        data-calculator="your-calculator-id" 
        async defer>
</script>

The widget automatically detects and uses the container with ID tailorquote-widget-container.

Platform-Specific Instructions

WordPress

1. Edit the page or post
2. Switch to HTML/Text mode or add a Custom HTML block
3. Paste the embed code
4. Save and preview

Wix

1. Add an HTML iframe element
2. Click "Enter Code"
3. Paste the embed code
4. Adjust sizing as needed

Squarespace

1. Add a Code Block to your page
2. Paste the embed code
3. Leave "Display Source" unchecked
4. Save

Shopify

1. Go to Pages or Blog Posts
2. Click the HTML button (</>)
3. Paste the embed code
4. Save

Using Standalone Pages

When you select "Shareable Link" mode, your calculator gets a public URL.

Getting Your Link

1. Select Shareable Link in display mode
2. Copy the URL shown:

   https://yourdomain.com/calculator/your-calculator-id
   

3. Click Copy button for convenience

Sharing Your Calculator

Direct Sharing

Share the link via:

• Email signatures
• Social media posts
• SMS messages
• QR codes

Email Example

Hi [Name],

Get an instant quote for our services:
https://yourdomain.com/calculator/your-id

It only takes 30 seconds!

Social Media Example

Need a quote? Skip the back-and-forth!
Get instant pricing: [your-link]
#NoWaitingRequired

Testing with Preview

Before going live, always test using the Preview Calculator button:

1. Click Preview Calculator
2. New window opens with your calculator
3. Test the complete flow
4. Verify it works as expected

Troubleshooting

Widget Not Appearing

Check these common issues:

1. Correct URL - Verify the script src matches your domain
2. Calculator ID - Ensure data-calculator attribute is correct
3. JavaScript Enabled - Calculator requires JavaScript
4. Console Errors - Check browser console (F12) for errors

Standalone Page Issues

If the public link doesn't work:

1. Display Mode - Verify "Shareable Link" is selected
2. Calculator Saved - Ensure changes are saved
3. Correct URL - Check you copied the complete URL

Styling Conflicts

If the calculator looks wrong on your site:

1. The widget inherits some styles from your page
2. You can wrap it in a div with specific styling:

<div style="max-width: 600px; margin: 0 auto;">
  <!-- embed code here -->
</div>

Best Practices

For Embedded Calculators

• Place prominently on relevant pages
• Add context with headings and descriptions
• Test on mobile devices
• Monitor page load speed

For Standalone Pages

• Use descriptive link text when sharing
• Include value proposition in messages
• Track link clicks if possible
• Consider using URL shorteners for social media

Monitoring Usage

Track your calculator's performance:

1. Preview Testing - Use preview to see user experience
2. Quote Tracking - Monitor quotes in your dashboard
3. Customer Feedback - Ask users about their experience

Next Steps

With your calculator live:

1. Start receiving quotes
2. Track quote status
3. Invite team members to help manage responses

Your calculator is now ready to convert visitors into qualified leads!