Using a 3rd Party Website

It's possible to use all of getSoapy's services without using a getSoapy website, including quoting, payments and managed ads.
To do this you'll need to add some HTML tags to your website.

We recommend you refer to the documentation for your CMS or website provider on how to complete these steps.

Include our javascript file

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 tag.

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

Add our 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.