> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.spreadsimple.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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: ### 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. 1. Go to the `Settings` Tab -> **Widget settings** and open the **Widget builder** ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-1_f2l0rb.png) ![Here you can configure your widget settings](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-2_1i8a2mm.png) 2. 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: example.com Website URL with the widget embedded: `example.com/#` A details page on the website: `example.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`. 3. 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: ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-3_vri88w.png) In this example, when entering the website, visitors will see all the pizza options sorted in ascending order by price right away. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-4_kpcp8z.png) 4. After you’ve made all the changes and set up your widget settings, you can copy the widget embed code… ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-4_1mqoesl.png) …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 (optional) In the `Settings` Tab -> **Widget settings**, you can also enable the widget-only mode: ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-6_1wncba8.png) 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): ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/widget-7_8kcn8t.png) ### Create a list of allowed domains (optional) You can specify which domains are allowed to embed your widget and prevent it from being embedded on any other domains. Simply enter the allowed domains in the dedicated text field, one domain per line. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/1/8/f/918f9541750fe800/allowed-domains_r96nmo.png) Leave the field empty to allow your website to be embedded on any domain. ### Add the widget code onto another website How to add your widget code on: [Carrd](#3-carrd) [Google Sites](#3-google-sites) [Squarespace](#3-squarespace) [Webflow](#3-webflow) [Weebly](#3-weebly) [Wix](#3-wix) [WordPress](#3-wordpress) [Other Website technologies](#3-other-website-technologies) --- ### Carrd 1. 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** ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/0card1_1yjn0jw.png) 2. Paste your widget code to the Code field and click Done. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/0card2_i089aq.png) 3. Adjust the widget on the page and save the changes. --- ### Google Sites 1. Log in to your Google account and go to Google Sites. Then select the website where you'd like to install the widget: ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/1google1_1czevh0.png) 2. On the Editor panel click on **Embed button**, paste the widget code and click **Next**: ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/1google2_jskb8w.png) 3. Adjust the widget's width and height, save the changes and you are all done! --- ### Squarespace 1. Go to Squarespace admin panel → click **Settings** in the right-hand menu → go to Advanced tab → click **Code Injection** ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/3sq1_bapvag.png) 2. Select the field (Header or Footer), paste the widget code there, and click\*\* Save\*\*. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/3sq2_1524yix.png) --- ### Webflow 1. 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. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/4w1_4knlyr.png) 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](https://help.webflow.com/hc/en-us/articles/33961332238611). --- ### Weebly 1. In your Weebly account, choose the website where you'd like to add the widget. Click **Edit Website**. 2. 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. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/5we1_c1cp9k.png) 3. 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. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/5we2_d4sw8c.png) --- ### Wix 1. Go to Wix website editor. Click **Edit Site** → Click **Plus icon** → go to **Embed** section → select **HTML iframe**. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/6wix1_17be4yj.png) 2. Click **Enter Code**, paste your widget code and press **Apply**. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/6wix2_yomi9p.png) 3. 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. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/6wix3_a56bj1.png) --- ### WordPress 1. In your WordPress Dashboard choose the page where you'd like to add the widget. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/7wp1_1rgcirj.png) 2. Choose the area where you'd like to embed the widget and click **Add** icon. Then select **Custom HTML**. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/7wp11_10d6mc6.png) 3. Paste your widget code in the field that comes up and click **Update** to save changes. ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/7wp22_1e0ehjb.png) And you are all done! ![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/7wp444_3opvnd.png) ### 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.