Embedding SpreadSimple as a widget into other platforms
Embed your catalog or directory built with SpreadSimple as a widget onto another website by following these simple steps:
The instructions below apply to the new widget format. The old widget format will remain working, but we recommend updating the widget code on your host website.
Go to the Settings Tab -> Widget settings and open the Widget builder
Select the routing option (if necessary):
By default, all the widgets use routing. In this mode, during the navigation on the widget, a path is added to the website page URL. For example:
Website URL: domain.com
Website URL with the widget embedded: domain.com/#
A details page on the website: domain.com/#/item/item-one
Usually, this type of routing works best because it allows avoiding conflicts with other pages of the host website.
But sometimes the hash in the URL (#) can conflict with anchor links on the website. For cases like that, there’s the no routing option that you can select on the menu.
In no-route (or route-less) mode, the widget navigation won’t change the URL of the host website. This means the details pages won’t have URLs like domain.com/item/item-one.
Set the widget path (if necessary)
Setting the widget path will allow you to embed only a certain category of your cards/listings. If you want to embed the whole catalog, just leave the widget path field empty.
To set the widget path, open your SpreadSimple website in another tab, select a certain category (or sorting) by selecting the necessary options in the filters menu or the sorting menu and then copy the URL with filters/sorting/search states (for example, https://my-website.spread.sh/?filter=Category-%3APizza&sorting=Price-%3Aasc) and paste it into the widget path field:
In this example, when entering the website, visitors will see all the pizza options sorted in ascending order by price right away.
After you’ve made all the changes and set up your widget settings, you can copy the widget embed code…
…and paste it into the dedicated area of your host website.
Below you will find the instructions on embedding a widget onto different platforms.
In the Settings Tab -> Widget settings, you can also enable the widget-only mode:
In this mode, the website that you embedded as a widget won’t be accessible at the domain address (e.g., best-delivery.spread.name):
How to add your widget code on:
Carrd
Google Sites
Squarespace
Webflow
Weebly
Wix
WordPress
Other Website technologies
In your Carrd Dashboard open your website in the editing mode. Click Add icon to add a new element to the page and select Embed
Paste your widget code to the Code field and click Done.
Adjust the widget on the page and save the changes.
Log in to your Google account and go to Google Sites.
Then select the website where you'd like to install the widget:
On the Editor panel click on Embed button, paste the widget code and click Next:
Adjust the widget's width and height, save the changes and you are all done!
Go to Squarespace admin panel → click Settings in the right-hand menu → go to Advanced tab → click Code Injection
Select the field (Header or Footer), paste the widget code there, and click** Save**.
Go to Webflow website editor → click on the Add icon, then drag and drop the Embed element from the left-hand menu to the spot where you'd like the widget to be displayed.
Paste your widget code into HTML Embed Code Editor window that appears and click Save & Close.
Adjust needed settings in the right-hand menu, then click Publish and press Publish to Selected Domains.
For more details on how to embed custom code on Webflow please check this article.
In your Weebly account, choose the website where you'd like to add the widget. Click Edit Website.
On the left-hand menu select Add Section → select Embed code.
Drag and drop the Embed Code element from the left-hand menu to the place where you'd like the widget to be displayed.
Click on < > icon to open Embed code menu on the left, remove or edit Title and Description, and paste your widget code. The code will be applied automatically.
Go to Wix website editor. Click Edit Site → Click Plus icon → go to Embed section → select HTML iframe.
Click Enter Code, paste your widget code and press Apply.
Drag the widget to the right page area and stretch it to get the size you need.
Keep stretching until scroll bars are gone and all the required information fits into the block.
In your WordPress Dashboard choose the page where you'd like to add the widget.
Choose the area where you'd like to embed the widget and click Add icon. Then select Custom HTML.
Paste your widget code in the field that comes up and click Update to save changes.
And you are all done!
Didn't find the website you need?
Don't worry, nowdays most of the CMS have this option. It can be called Insert HTML, Embed code, Custom code, Add Custom Code or something like that, you just need to find it.
Also, static websites support SpreadSimple widget as well.
Configure your widget settings
The instructions below apply to the new widget format. The old widget format will remain working, but we recommend updating the widget code on your host website.
Go to the Settings Tab -> Widget settings and open the Widget builder
Select the routing option (if necessary):
By default, all the widgets use routing. In this mode, during the navigation on the widget, a path is added to the website page URL. For example:
Website URL: domain.com
Website URL with the widget embedded: domain.com/#
A details page on the website: domain.com/#/item/item-one
Usually, this type of routing works best because it allows avoiding conflicts with other pages of the host website.
But sometimes the hash in the URL (#) can conflict with anchor links on the website. For cases like that, there’s the no routing option that you can select on the menu.
In no-route (or route-less) mode, the widget navigation won’t change the URL of the host website. This means the details pages won’t have URLs like domain.com/item/item-one.
Set the widget path (if necessary)
Setting the widget path will allow you to embed only a certain category of your cards/listings. If you want to embed the whole catalog, just leave the widget path field empty.
To set the widget path, open your SpreadSimple website in another tab, select a certain category (or sorting) by selecting the necessary options in the filters menu or the sorting menu and then copy the URL with filters/sorting/search states (for example, https://my-website.spread.sh/?filter=Category-%3APizza&sorting=Price-%3Aasc) and paste it into the widget path field:
In this example, when entering the website, visitors will see all the pizza options sorted in ascending order by price right away.
After you’ve made all the changes and set up your widget settings, you can copy the widget embed code…
…and paste it into the dedicated area of your host website.
Below you will find the instructions on embedding a widget onto different platforms.
Enable widget-only mode
In the Settings Tab -> Widget settings, you can also enable the widget-only mode:
In this mode, the website that you embedded as a widget won’t be accessible at the domain address (e.g., best-delivery.spread.name):
Add the widget code onto another website
How to add your widget code on:
Carrd
Google Sites
Squarespace
Webflow
Weebly
Wix
WordPress
Other Website technologies
Carrd
In your Carrd Dashboard open your website in the editing mode. Click Add icon to add a new element to the page and select Embed
Paste your widget code to the Code field and click Done.
Adjust the widget on the page and save the changes.
Google Sites
Log in to your Google account and go to Google Sites.
Then select the website where you'd like to install the widget:
On the Editor panel click on Embed button, paste the widget code and click Next:
Adjust the widget's width and height, save the changes and you are all done!
Squarespace
Go to Squarespace admin panel → click Settings in the right-hand menu → go to Advanced tab → click Code Injection
Select the field (Header or Footer), paste the widget code there, and click** Save**.
Webflow
Go to Webflow website editor → click on the Add icon, then drag and drop the Embed element from the left-hand menu to the spot where you'd like the widget to be displayed.
Paste your widget code into HTML Embed Code Editor window that appears and click Save & Close.
Adjust needed settings in the right-hand menu, then click Publish and press Publish to Selected Domains.
For more details on how to embed custom code on Webflow please check this article.
Weebly
In your Weebly account, choose the website where you'd like to add the widget. Click Edit Website.
On the left-hand menu select Add Section → select Embed code.
Drag and drop the Embed Code element from the left-hand menu to the place where you'd like the widget to be displayed.
Click on < > icon to open Embed code menu on the left, remove or edit Title and Description, and paste your widget code. The code will be applied automatically.
Wix
Go to Wix website editor. Click Edit Site → Click Plus icon → go to Embed section → select HTML iframe.
Click Enter Code, paste your widget code and press Apply.
Drag the widget to the right page area and stretch it to get the size you need.
Keep stretching until scroll bars are gone and all the required information fits into the block.
WordPress
In your WordPress Dashboard choose the page where you'd like to add the widget.
Choose the area where you'd like to embed the widget and click Add icon. Then select Custom HTML.
Paste your widget code in the field that comes up and click Update to save changes.
And you are all done!
Other Website technologies
Didn't find the website you need?
Don't worry, nowdays most of the CMS have this option. It can be called Insert HTML, Embed code, Custom code, Add Custom Code or something like that, you just need to find it.
Also, static websites support SpreadSimple widget as well.
Updated on: 06/03/2023
Thank you!