Once the initial setup steps are complete, Hero's support team will advise when you can add widgets to your website.
Page layout
Your page layout may need adjusting to accommodate the Hero Widget. The Widget displays at roughly 1/3 of the content width in a vertical rectangle shape. It's best loaded on the right-hand side of your page. View an example here.
Steps:
Within Hero, switch to your API-enabled agency Branch. (This is usually called Online or Widget)
Use the drop-down menu, top-right, to switch to Reports & Admin
From the Branch Menu on the left, click Widgets
Create and configure your Widgets using the tool provided
Copy the Widget iFrame Code and paste into an HTML module on your web page
Ensure the Widget Script Reference is pasted into your site header, so it's present on every page.
Options:
Widget Name | Name your Widget for easy reference later on |
Style | Single Product Widget displays a single product from a supplier
Multi Product Widget displays selected products from a single supplier |
Supplier Name | Shown, displays the Supplier Name on the You Are Booking Screen and Summary Screen
Not Shown, hides the supplier name from these screens |
Auto-select next date | Yes, auto-selects the next available date for the product
No, displays the next month where events exist, with no date selected |
Discount Metric | Value, allows a discount by a currency amount. Note, the currency displayed and applied on the Widget is that of the Supplier, not your agency. So, if your agency is setup in AUD but the product is priced by the supplier in EUR, the currency discount will be a EUR value. Note, the discount value must be below your total commission value.
Percentage, allows a discount by a percentage amount, based upon RRP. Note, the discount value must be below your total commission value. |
Discount Value | Set a value to apply to the metric, i.e. $5 or 5%. |
Font | Choose a font style |
Primary Colour | Choose a primary colour style |
Secondary Colour | Choose a secondary colour style |
Title Text Override | Add text to replace that in the Widget Title |
Button Text Override | Add text to replace that in the Widget Button |
Promo Code Success Colour | Choose a colour for text to display a successful use of a promo code |
Success URL | Set a page for the customer to be redirected to once the booking is complete |
Widget Code | An internal reference for this widget. Not to be placed onto your site. |
Applicable Promo Codes | Select which Promo Codes apply to this Widget, replacing any Discount Value set for the Widget with that of the Promo Code. |
Script Reference (once per page) | This script must appear within the header of your website. |
iFrame Code for this Widget (click to copy) | Paste this script into your web page in the area where you wish the widget to display. |
Process a Test Booking:
We recommend that you add a widget to your site for the Hero $1 test product, then test the booking and cancellation process from start to finish.
Notes and next steps...
Bookings made via the Widget will appear in the Completed Orders tab in the Branch in which the Widget was created.
Should a widget booking fail, it will appear within your Outstanding Quotes tab. (In these instances, contact Hero Support for assistance).
If processing bookings manually, not via the Widget, be sure not to use your Online Branch, as you will be subject to Widget booking fees. Use your other Branch instead.
The Widget displays pricing in the currency of the supplier's Hero account, not the currency of the agency.
If you sell products from suppliers priced in other currencies and want payments to be recorded in a Branch with the same currency, speak to Hero Support.
Bookings are set to 'auto-finalise' and 'auto-email' tickets to customers. Speak to us if you wish either of these features turned off.
Our Hero Portal + Widget access fee will be invoiced and charged annually.
Commission due to you will be displayed in your Branch Menu > Reports > Invoices.
If you wish to receive automated email notifications for every Finalised Booking in your Online Branch, let us know.