Overview

ServiceAreaWidget lets you easily add a coverage map or interactive service area lookup tool to your website. This guide will walk you through creating and embedding your coverage map in just a few simple steps.

Step 1: Create Your Account

1. Visit ServiceAreaWidget.com
2. Click "Try it free" to start your 7-day trial or a free plan
3. Create your account

Step 2: Define Your Service Areas

1. From your dashboard, click "Add New Area" or navigate to Manage Areas
2. For each service area:
   • Give it a name (e.g., "Manhattan Service Zone")
   • Add an optional description
   • Choose your drawing method:
     • Polygon: Draw a custom shape by clicking points on the map
     • Circle: Create a circular zone with a specific radius
     • Freehand: Draw naturally with your mouse for organic shapes
3. Draw your area on the map using your chosen method
4. Click "Create Area" to save

Great! You've created your first service area. If you just want a simple coverage map, you can skip ahead to Step 5. For more advanced setups with custom areas and detailed control over results, continue with Step 3-Step 4.

Step 3: Set Up Custom Triggers and Actions

This feature is available on paid plans only.

1. Navigate to "Triggers & Actions" in your dashboard
2. Configure responses based on location match:
   • Redirect to specific landing pages
   • Show custom contact forms
   • Display targeted promotions
   • Trigger chat widgets
   • Set up email notifications
3. Customize out-of-service responses:
   • Show alternative service options
   • Collect lead information
   • Display nearest service location
   • Redirect to partner websites

Step 4: Customize Your Fields

This feature is available on paid plans only.

1. Go to "Fields" in your dashboard
2. Add custom fields for each service area, such as:
   • Service hours
   • Pricing information
   • Contact details
   • Special offers
   • Call-to-action buttons

Step 5: Preview Your Map

1. Navigate to "Widget Settings" in your dashboard
2. Customize your widget's appearance:
   • Choose between map view, search bar, or both
   • Select your color scheme
   • Adjust map style and zoom levels
   • Customize messages for in/out of service areas

Step 6: Add to Your Website

1. Go to "Embed On Your Website" in your dashboard
2. Find your unique embed code - this code is specific to your account and contains your personal widget ID
3. Copy the entire code snippet from your dashboard (don't use example code from elsewhere!)
4. Paste the code into your website where you want the widget to appear

Platform-Specific Instructions:

WordPress

1. Edit your page
2. Add a "Custom HTML" block
3. Paste the embed code
4. Update/publish your page

Shopify

1. Go to Online Store → Pages
2. Edit your page
3. Click the </> HTML editor icon
4. Paste the embed code
5. Save changes

Squarespace

1. Edit your page in Squarespace
2. Add a "Code" block to your page
3. Paste the embed code
4. Save and publish your changes

Webflow

1. Open your page in the Webflow Designer
2. Add an "Embed" element to your page
3. Paste the embed code into the "Embed Code" field
4. Publish your changes

Wix

1. Edit your Wix site
2. Click the + button to add an element
3. Search for and add "HTML iframe"
4. Click "Enter Code" and paste the embed code
5. Click "Update" and publish your site

Other Platforms

• Look for options like "Custom HTML", "Embed Code", or "HTML/JavaScript"
• Paste our widget code into these areas
• Save and publish your changes

That's It!

Your service area widget is now live!

Need assistance? Email us at [email protected]