Javascript Plugin

Installing the plugin

Add the following Javascript tags to every page on your website, replacing {business-id} with your unique business ID (this is available in the "Using a 3rd Party Website" help article when signed into app.getsoapy.com).
This should be added near the end of your HTML, just before the closing </html> tag.

You need to initialise the plugin using your unique Business ID. You can find this ID in the help section within app.getsoapy.com.

<script defer src="https://embed.getsoapy.com/embed.js"></script> 
<script type="text/javascript"> 
    document.addEventListener('DOMContentLoaded', function() { 
        getSoapy.init('{business-id}', { 
            // Optional settings 
            completeInSections: true, 
            floatingActionButton: true, 
        }); 
    }); 
</script>

Settings

defaultStyles

Override the default widget styles. See x-styles below.

trackPageView

Default true. Allows disabling of page view tracking.

loadStyles

Default true. Allows disabling of all CSS styles. This will disable ALL plugin CSS and you'll need to style everything yourself.

quoteElement

Default 'getsoapy-quote'. Allows changing the element ID where the quote widget is instantiated.

payElement

Default 'getsoapy-pay'. Allows changing the element ID where the pay widget is instantiated.

hideFields

Allows hiding certain fields in the quote widget. See x-hide-fields below.

completeInSections

Default false. Set this to true for the quote form to be split into pages. We recommend setting this to true.

sectionTitles

Default true. Allows disabling of section titles when completeInSections is enabled.

floatingActionButton

Default false. Set this to true to enable the floating "request a quote" button. We recommend setting this to true.

onQuoteSubmitted

Optional function which will be called when a quote is submitted.

onQuoteNext

Optional function which will be called when a the "next" button in the quote widget quote clicked.

prefill

Javascript object which allows prefilling of certain fields. Valid field names are: name, email, phoneNumber, postcode and amount. Amount is specified in pence.
For example: {name: 'John Doe', amount: 2000}

Placing the widgets

Quote

Add the follow HTML tag wherever you'd like to show the quote widget:

<div class="getsoapy" id="getsoapy-quote"> 
  Loading getSoapy quote widget. You must have javascript enabled to use this. 
</div>

Payment

Add the following HTML tag wherever you'd like to show the payment widget:

<div class="getsoapy" id="getsoapy-pay"> 
  Loading getSoapy payment widget. You must have javascript enabled to use this. 
</div>

Customer Portal

Add the following HTML tag wherever you'd like to show the customer portal widget:

<div class="getsoapy" id="getsoapy-portal"> 
  Loading getSoapy customer portal widget. You must have javascript enabled to use this. 
</div>

Customising

These options can be added to each widget tag and allow you to customise each widget separately.

x-title

You may replace the title of the widgets using this attribute. If you set it to a blank string (x-title="") no title will be shown.

x-hide-fields

You may specify a comma separated list of field names to hide.
Fields which can be hidden - availability, frequency, building, bedrooms, and consent.

x-style

There are a number of styling options you can specify.

If no style tag is specified the default is equivalent to x-style="bg-light shadow rounded border p-3"

Padding

p-1 to p-5 - higher numbers add more padding.

Border

border adds a border to the widget.

Rounded

rounded rounds the corners of the widget.

Shadow

shadow-lg, shadow and shadow-sm add a shadow of different sizes.

Background

bg-light sets a light grey background and bg-white sets a white background.