Guide | MobiPOS  >  Online Ordering  >  Sell on Wix  

Sell on Wix

This simple guide will allow users to sell their products directly on your Wix webpage by adding HTML iframe.
The outcome should look something like this.

MobiOrder on Wix

Add Page to Your Site Menu

Firstly, go to your existing Wix web editor and add a page to your store website.
This can be a new page, or you may replace the existing pages that are supposed to sell your products.

add new page on wix

add blank page on wix

In this example, our newly added page will be "Order Now".

mobiorder sample page on wix

Add HTML iframe

On your left, select Add > Embed > Custom Embeds.
Under Custom Embeds, select HTML iframe.

add HTML iframe on wix

A grey container should appear as shown below.
Right above the grey container, select Enter Code > Website Address.
In the empty box, you may paste your MobiOrder website URL and select Apply as the example below.

add MobiOrder URL to wix

The grey box should now show your MobiOrder webpage.

HTML iframe container added to page

If your MobiOrder page is not showing through the small preview window like the image above, please continue to read our next instruction.
Otherwise, you may proceed to Adjust Container Size section.

Page Not Showing: Connection Refused

wix not showing mobi order website page

If you are seeing this grey error image in your preview box, this part of the guide is for you.

wix not showing mobi order website publish page

To solve this issue, first, you should publish your page.

wix select a domain

Select your domain and decide your site's address. You can either use Wix's free domain or connect to your own customised domain. Click "Save & Continue" when the official URL is decided.

wix site is saved notification

Wix will notify you that your site is saved. Click "Done".

wix site is published and live online

After finishing the process to publish your site, copy your site URL to your clipboard.

mobipos cloudsync online order settings page application linking

Next, go to CloudSync -> Online Ordering. With the help of our sidebar menu, go to the "Application Linking" section.

mobipos cloudsync online order settings insert website url iframe section

Under Application Linking, paste your Wix website URL into the Iframe column.
Don't forget to save your edits after making changes.

wix mobi order page showing

You may now refresh your Wix editing page. Your MobiOrder website should be showing in the preview box.

Adjust Container Size

Fully extend all the edges of the container to the corner of your page.
Make sure that you're able to see the entire navigation bar of your MobiOrder webpage (including your store logo and the 3 buttons on the top right corner).

extend container to the corners on desktop view

Do the same for mobile view too.

extend container to the corners on mobile view

Save and Publish

After that, you may preview your page.
Scroll around the webpage and make sure you're able to see all the sections.
You should test both the mobile view and desktop view.

You may publish your page when you're satisfied.