This article is intended for web developers to learn more about our installation options and developer API for more control over the behavior and appearance of the Website Widget. For a high-level walkthrough of the installation process starting in Otto Flow, please check out Add the Website Widget to Your Website.
Install
Floating (default)
This default option allows you to display the widget "floating" above all other content on the page in the lower right corner (by default) of the page.
- Copy the Website Widget script from the Website Widget Settings page in Otto Flow.
- Paste the script just before the
</body>tag on all pages where you'd like the widget to display.
Inline
This option allows you to embed the widget "inline" in a containing element of your choosing.
- Copy the Website Widget script from the Website Settings page in Otto Flow.
- Paste the script just before the
</body>tag on all pages where you'd like the widget to display.
In the location of your choice on each page where you'd like the widget to display, add an HTML element with an id attribute of otto-widget-iframe-container (e.g., <div id="otto-widget-iframe-container"></div>). The widget will be displayed within this element and take up its full width and height, so feel free to add style rules to alter the dimensions of the container element as desired.
Preview on the demo site
Once the Website Widget has been enabled on the Website Widget Settings page in Otto Flow, you can preview and interact with the actual Website Widget for your clinic on our demo site:
Be sure to replace clinic-id with your clinic's actual ID, which is a 25-character string that can be found within the Website Widget script.
Customize and control
JavaScript API
initialize
otto.widget.initialize(clinicId: string, options?: InitializationOptions)
InitializationOptions
Property | Type | Is Required | Default |
isOpen | boolean | false | false |
showPreview | boolean | false | true |
selectRequestType | WidgetRequestType | false | N/A |
WidgetRequestType
See table below.
otto.widget.destroy()
otto.widget.open()
otto.widget.close()
otto.widget.toggle()
otto.widget.selectRequestType(requestType: WidgetRequestType)
WidgetRequestType
Value | Default Label |
RequestAppointment | Request an appointment |
RequestRxRefill | Request medication or food refill |
RequestGroomingAppoinment | Request grooming |
RequestBoarding | Request boaridng |
TalkToStaff | Talk to staff |
RequestMedicalRecords | Request medical records |
RequestVirtualConsult | Request a virtual consultation |
DirectBooking | Book an appointment |
Query parameter commands
Place any of the following query parameters in the URL to carry out the desired action on page load:
Parameter | Value(s) | Action |
ottoWidgetOpen | To open: (None), true, etc. To not open: false, 0 | Opens the widget on page load if the value provided is not either false or 0. |
ottoWidgetSelectRequestType | See table above. | Selects the provided request type if that type is enabled for the clinic's widget.
Note: If there are duplicate active request types, only the first one can currently be selected. |