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
andamount
. 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
, 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.
Customers
- Adding a cash payment to a customer
- How do I change the messages sent to customers?
- How do I charge a customer?
- How is recurring value calculated?
- How to add a customer
- Understanding customers in getSoapy
- What is the customer portal?
Payments
- Bank Reconciliation
- Exporting payment data
- How do I receive payments?
- How much do payments cost?
- Payment Statuses
Quotes
- Can I customise the quote fields?
- How do I receive quotes?
- Quote Statuses
- Using tags in itemisations
Additional Users
Marketplace
Message Templates
Organising work
Rounds
Websites
Balance
Expenses
Getting Started
Plugins
customers
Dashboard
Pricing