Embed Installation Guide

Complete guide to installing Shop.Solar calculator on your website. Takes 5-10 minutes for most platforms.

Before You Start

You'll need:

1. Active Pro subscription
2. API key from API Keys page
3. Your website domain added to Allowed Origins

Platform requirements:

WordPress: Any plan (free works)
Wix: Premium plan required for HTML embeds
Squarespace: Business plan or higher

Quick Start (3 Steps)

Get Your Embed Code

Visit the Embed Code Generator and configure your widget settings (theme, height, UTM parameters).

Click "Copy Code" to copy the embed script to your clipboard.

Add to Your Website

Paste the code where you want the calculator to appear. See platform-specific instructions below.

Test & Publish

Save your changes, view your page, and verify the calculator loads. Try a test calculation to ensure everything works.

Platform-Specific Instructions

WordPress (Most Common)

WordPress has multiple ways to add custom HTML. Choose the method that fits your setup:

Method 1: HTML Block (Gutenberg Editor)

Edit the page where you want the calculator
Click the "+" button to add a new block
Search for "Custom HTML" and select it
Paste your embed code into the HTML block
Click "Update" to publish

Method 2: Shortcode (Classic Editor)

Install "Insert Headers and Footers" plugin
Go to Settings → Insert Headers and Footers
Paste embed code in "Scripts in Body" section
Add shortcode [shop_solar_widget] where you want it to appear

Method 3: Widget Area (Sidebar/Footer)

Go to Appearance → Widgets
Add "Custom HTML" widget to desired area
Paste your embed code
Save changes

Wix

Open your Wix site in the Editor
Click the "+" button to add an element
Select "Embed" → "HTML iframe"
Click "Enter Code" in the settings panel
Paste your embed code
Adjust the height to match your configured height (default: 600px)
Click "Update" and publish your site

Note: Wix may require you to upgrade to a premium plan to use custom HTML embeds.

Squarespace

Important: Squarespace requires a Business plan or higher to add custom code blocks. Personal and Basic plans don't support JavaScript embeds.

Edit the page where you want the calculator
Click the "+" button to add a content block
Search for "Code" and add a Code Block (not Markdown)
Paste your embed code into the code editor
Important: Ensure "Display Source" is set to HTML (not Markdown)
Click outside the block to save, then publish your changes

Common mistake: Using "Markdown" mode instead of "HTML" mode will display the raw code as text. Always verify "Display Source" shows "HTML".

Custom HTML Website

If you have direct access to your website's HTML files:

Open the HTML file where you want the calculator (e.g., index.html, solar-calculator.html)
Find the location in the <body> section where you want it to appear
Paste the embed code
Save the file and upload to your web server

<section className="solar-calculator">

</section>

Frequently Asked Questions

How do I test without affecting my live site?

Use Demo Mode: Test the widget without an API key or rate limits

script.dataset.mode = 'demo'; // No API key needed

Demo mode features:

No API key required
Limited to 10 calculations per hour
Leads are not saved to your CRM
"Demo Mode" watermark visible

For staging sites: Add your staging domain to Allowed Origins (e.g., https://staging.yoursite.com)

Can I customize the widget colors to match my brand?

Yes! Choose from built-in themes or upload your logo:

Theme Selection:

script.dataset.theme = 'light'; // or 'dark'

Custom Branding:

Upload your logo in Branding Settings
Set company name to appear in widget header
Configure widget display options

Note: The widget iframe does not expose CSS custom properties for external styling. Use wrapper containers for positioning and layout control.

Contact support@shop.solar for advanced styling options.

What customer data is captured?

Calculation Data (anonymous):

Monthly electric bill
ZIP code
Roof condition and shade level
Timestamp and IP address (anonymized)

Lead Submission Data (when user submits form):

Name, email, phone number
Best time to call preference
Optional message
Calculation data (associated with lead)
UTM parameters (if present in URL)
Lead quality score (automatically calculated)

All data is encrypted in transit (HTTPS) and stored securely. See our Privacy Policy for details.

Is the widget GDPR compliant?

Yes! The widget is GDPR-compliant by default:

No personal data collected until user explicitly submits lead form
Anonymous calculations do not identify individuals
Users have right to access and delete their data (contact support)
Data processing agreement available for EU businesses
IP addresses are hashed before storage (pseudonymization)

CCPA Compliance: Enable opt-out mode:

script.dataset.ccpaOptOut = 'true';

Contact legal@shop.solar for Data Processing Agreement (DPA).

How do I export leads from the widget?

All leads are automatically synced to your CRM. Export options:

Method 1: CRM Export

Go to CRM Customers
Filter by Source → "Embedded Widget"
Click "Export" button (top right)
Choose CSV or PDF format

Method 2: Analytics Export

Go to Analytics Dashboard
Select date range
Click "Export" dropdown
Download CSV or PDF report

Exported Data Includes:

Full contact information
Calculation data (system size, savings, payback period)
Lead quality score and factors
Source details (URL, UTM parameters)
Submission timestamp

Can I use multiple widgets on different pages?

Yes! You can embed the calculator on multiple pages using the same API key.

Same Configuration:

Use identical embed code on all pages for consistent branding.

Different Configurations:

Customize each page with different settings:

// Homepage: Light theme
script.dataset.theme = 'light';

// Services page: Dark theme
script.dataset.theme = 'dark';

Track Different Pages:

Use UTM parameters to identify which page generated leads:

script.dataset.utmSource = 'homepage';

Note: All calculations count toward your daily quota (100/day on Basic plan).

What happens if I hit the rate limit?

Current Rate Limits:

Anonymous calculations: 10 per hour per IP
Lead submissions: 5 per day per IP
API key usage: 100 per day (Basic plan)

What Users See:

Widget displays friendly message: "High demand right now. Please try again in a few minutes."

Solutions:

Wait for Reset: Limits reset automatically (hourly or daily)
Upgrade Plan: Increase limits
- Pro: 500 calculations/day ($29/mo)
- Business: 2,000 calculations/day ($99/mo)
- Enterprise: Unlimited (custom pricing)
Temporary Increase: Contact support for emergency quota increase

Monitor Usage:

View real-time quota usage in Analytics Dashboard. Set up alerts at 80% quota.

Customize Rate Limit Message:

script.dataset.rateLimitMessage = 'Call us at (555) 123-4567 for immediate assistance!';

Troubleshooting

Common issues and solutions. Need more help? Contact support.

Widget not loading / blank space

Check:

Verify your API key is correct (check API Keys page)
Ensure your website domain is in the allowed origins list
Check browser console for JavaScript errors (F12 → Console)
Verify embed script URL is exactly: https://shop.solar/embed.js

Calculations returning "unauthorized" error

Cause: API key validation failing

Solution:

Verify API key in embed code matches your current API key
If you regenerated your API key, update all embed codes
Add your website domain to allowed origins

Widget appears too small / too large

Solution:

Adjust the data-height attribute in embed code
Try "auto" for responsive height
Recommended heights: 500px (compact), 600px (standard), 700px (comfortable)

Logo/branding not showing

Check:

Upload your logo in Branding Settings
Verify data-show-branding="true" in embed code
Wait 5 minutes after uploading logo (CDN cache)

Need Help?

Can't find the answer you're looking for? Our support team is here to help.

Email Support ← Back to Embed Generator