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.co.uk).
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.co.uk.

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

Placing the widgets

Quoting

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>

Customising

There are a number of customisation options available in the widgets.

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.