How do I configure the getSoapy Javascript plugin?
You can add getSoapy features to any website using the 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 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 App in the "Domain & Pages" in the More section.
<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. documentsElement
- Default
getsoapy-documents
. Allows changing the element ID where the documents 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 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
,address
andamount
. Amount is specified in pence.
For example:{name: 'John Doe', amount: 2000}
useV2
- Default false. Set this to true to use the new version of the widgets. See here for more information.
We recommend you use V2, as V1 will be deprecated in the future.
Placing the widgets
Quote
Add the following 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>
Combined
The combined widget allows you to show the quote and either the payment or customer portal widgets in one place.
Add the following HTML tag wherever you'd like to show the combined widget:
<div class="getsoapy" id="getsoapy-combined">
Loading getSoapy combined widget. You must have javascript enabled to use this.
</div>
Documents
Add the following HTML tag wherever you'd like to show the documents widget:
<div class="getsoapy" id="getsoapy-documentsโ>
Loading getSoapy documents widget. You must have javascript enabled to use this.
</div>
The documents widget will not be displayed if no documents have Show on website
enabled.
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.
The following fields can be hidden:availability
,frequency
,building
,bedrooms
, andconsent
. - 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
top-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
andshadow-sm
add a shadow of different sizes.
- Background
bg-light
sets a light grey background andbg-white
sets a white background.
Invoking the widgets
You can invoke a widget manually using the methods below. This will cause the widget to scroll into view if needed, and if appropriate the quote widget to open in a modal view, or the combined widget to switch to the requested widget.
Using anchor links
These anchor tags do not really exist, but the javascript will listen for them and invoke the appropriate widget.
<a href="#quote">Request a quote</a>
<a href="#pay">Make a payment</a>
<a href="#portal">Log into the customer portal</a>
<a href="#document">View our documents</a>
Using Javascript
<button onClick="getSoapy.startQuote()">Request a quote</button>
<button onClick="getSoapy.startPay()">Make a payment</button>
<button onClick="getSoapy.startPortal()">Log into the customer portal</button>
<button onClick="getSoapy.startDocuments()">View our documents</button>