In this guide, we will display the steps to add your ePOS Hybrid online ordering system to your existing website.
The iFrame - the code that allows your online ordering system to be integrated to your existing website - is always available to view on the ePOS Hybrid Admin Panel.
To view your iFrame, log into your Admin Panel, select Web&Mob Management followed by Web Layout Design.
Copy the iFrame code within the New URL textbox, as you will need this when you are ready to add the online ordering system to your website.
If you have a developer managing your website, they can be sent this iFrame to integrate into your website, however if you manage your website yourself, a number of website providers are listed below with the steps to add your iFrame and allow customers to place orders via your website.
If you require further support or your website provider is not listed below, we recommend that you seek support from your website provider (or external website developer) to assist with adding your iFrame to enable online ordering on your existing website.
Wix
To add the iFrame on Wix, go to your Site Editor and select the page where you wish to add your online ordering platform.
Click the + (Add) button on the sidebar at the left of the page, followed by Embed > Custom Embeds and finally the Embed a widget button (highlighted in the screenshot below).
After selecting Embed a widget, the below HTML box will appear on the page.
Next, select the Enter Code button and select Code in the What do you want to add? section. Ensure you have the iFrame copied from the ePOS Hybrid Admin Panel and paste this into the Add your code here textbox (example below).
Click the Update button and close this box to add your online ordering platform, using the box to adjust the width and height of the page to your preferred size. Use the Preview button to check the design (example below) and press Publish to update your website.
If you require any further assistance in adding your iFrame, please contact Wix Support or your external web developer/designer.
Squarespace
To add the iFrame on Squarespace, select the relevant page you wish to have customers visit to place orders - this will open the page preview.
Click the EDIT button to open the page editor and use the ADD SECTION button - selecting the Add Blank + option - to match the screenshot below.
Click one of the highlighted + icons to open the list of options to add - select Code from the list of available options.
This will open the pop-up allowing you to paste the iFrame from your ePOS Hybrid Admin Panel. To do so, delete the example code in the textbox and paste the iFrame into this line to integrate your online ordering platform into your website:
The Height can be amended within the pasted iFrame code to adjust the height of the embedded online ordering platform to match your preferences.
Once the iFrame has been pasted and height amended (if required), click away from the Content box to return to the main page editor screen. Click DONE on the top-left corner of the page editor to save your changes.
If you require any further assistance in adding your iFrame, please contact Squarespace Support or your external web developer/designer.
GoDaddy
To add the iFrame on the GoDaddy website builder, select the page you want customers to visit to place their orders.
Once editing the relevant page, click the Add Section button as per the screenshot below:
If content is already on the page, the Add Section button will be available to click above or below any existing sections. Select Files & Web then select HTML from the Add Section menu. Click Add to add this section to your page.
Once the section is selected, paste the iFrame code into the Custom Code textbox to add your online ordering platform to the page. To increase the height of the page, use the Forced Height textbox - 900 has been used in the example screenshot below:
After pasting the iFrame and entering the Forced Height, click Done to complete adding your online ordering platform - you can use the Preview button to preview the page on both desktop and mobile formats before selecting Publish to update your website.
If you require any further assistance in adding your iFrame, please contact GoDaddy Support or your external web developer/designer.
Weebly
To add the iFrame onto your website built using Weebly, open the website editor and select the page using the Pages tab to choose the page that you want customers to visit to place orders.
Once the page is selected, this will open the preview for the relevant page. Select the Build tab, and scroll down on the left-hand side of the page (where the different website elements are added) until you reach Embed Code (as shown in the screenshot below):
Once you reach the Embed Code button, drag and drop the button into the preferred location on your page to allow the iFrame to be entered.
This will add a small box with Click to set custom HTML text.
Click anywhere inside the highlighted box to open the Custom HTML pop-up and click Edit Custom HTML.
Paste your iFrame into the new textbox, replacing the standard Click to set custom HTML text.
To ensure the full online ordering platform is visible, remove the highlighted vh text and specify your preferred height for the ordering page - 900 is the recommended number to use in this section to ensure all aspects of the online ordering page are visible for customers.
Once the height has been adjusted within the textbox, click away from the box to open the preview of the page - you can click within the section to reopen the Edit Custom HTML box if you need to edit the height further.
Click the Publish button to update your website once the online ordering platform has been added.
If you require any further assistance in adding your iFrame, please contact Weebly Support or your external web developer/designer.
Help us improve our Support Center. Was this article helpful?
Best ePOS solution for your business
Re-invent your business using our application stack:
Operator app, Waiter app, Kitchen Display, Digital Menu, Selfcheckout, Smart Table, Feedback app, Driver app, Website Ordering, Mobile Ordering
App and more...
