Skip to main content
Gridix widget on a website
Gridix widgets let you embed interactive floor plans, apartment availability, and lead forms into a developer or agency website. Visitors stay on your website, explore available units visually, and submit an inquiry without opening a separate Gridix workspace. The usual setup is simple: choose a project in Gridix, generate the embed code, paste it into your website, and test the experience on desktop and mobile.
Video: example Gridix project workflow. If you have a dedicated widget generation video, use it here.

​
Simplest path

If you are setting up the widget without a developer, follow this short flow first.
1

Generate the code in Gridix

Open the widgets section, choose the project, and select the interface language.
2

Paste the code into your website

Use an HTML block in your CMS or send the code to the person who manages your website.
3

Test a lead

Open the published page as a regular visitor and submit a test inquiry.

​
What the widget does

The widget brings the main Gridix buyer experience into your website:
  • Interactive floor plans: visitors can select apartments directly on the visual plan.
  • Lead collection: inquiry forms are part of the browsing flow.
  • Multi-language interface: English, Russian, Georgian, and Arabic are supported.
  • Responsive layout: the widget works across desktop and mobile screens.
  • Brand fit: the surrounding page and container can match your website design.

​
Before you start

Before embedding the widget, make sure that:
  • the project is published and has up-to-date floor plans;
  • apartments, prices, and availability statuses are configured;
  • lead forms are enabled and route leads to the correct Gridix workspace;
  • you have access to the website HTML, CMS custom-code block, or website developer.

​
Get the embed code

​
Step 1. Open the widget generator

1

Go to widgets

Open the widgets section in the Gridix admin dashboard.
2

Select a project

Choose what the website should display:
  • one specific project;
  • all developer projects.
3

Choose the default language

Set the default interface language:
  • English (en);
  • Russian (ru);
  • Georgian (ka);
  • Arabic (ar).

​
Step 2. Copy the code

1

Review the settings

Confirm that the selected project and language are correct.
2

Copy the embed code

Use the copy-code button to get the ready-to-use embed snippet.
3

Paste it into your website

Add the code to an HTML page, CMS block, or website template.

​
Basic embed code

<div id="gridix-widget-root"></div>
<script src="https://your-domain.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.GridixWidget && window.GridixWidget.init({
      lang: "en",
      projectId: "your-project-id"
    });
  });
</script>
The snippet has three parts:
  • Container: <div id="gridix-widget-root"></div> defines where the widget appears.
  • Script: loads the Gridix widget library.
  • Initialization: passes the project and language settings.

​
Where to find projectId and userId

  • projectId is used when the page should display one specific project.
  • userId is used when the page should display all projects for a developer or agency.
  • These values come from your Gridix workspace or from the ready embed code generated in the widgets section.
In production, replace your-domain.com, your-project-id, or your-user-id with the values from your Gridix workspace.

​
Embed on your website

SimpleUse this path if your CMS has a block for custom HTML or embed code.
1

Open the page in your CMS

Go to the project page, landing page, or floor-plan section where the widget should appear.
2

Add an HTML block

Look for a block named “HTML”, “Custom HTML”, “Embed”, “Code”, or something similar.
3

Paste the embed code

Paste the code from Gridix, save the page, and open preview.
Some CMS platforms remove <script> tags from regular text blocks. If the widget does not appear after publishing, use an HTML/Embed block or send the code to your website developer.
Do not reuse the same gridix-widget-root container multiple times on one page. If you need several widgets, give each one a different containerId.

​
Settings for integrators

If you do not work with code, you can send this section to your website developer together with the embed code. 
window.GridixWidget.init({
  lang: "en",
  projectId: "your-project-id"
});

window.GridixWidget.init({
  lang: "en",
  userId: "your-user-id"
});

window.GridixWidget.init({
  lang: "en",
  projectId: "project-id",
  theme: "light",
  showControls: true,
  enableSearch: true
});
  • lang: the widget interface language. Use en for English pages.
  • projectId: displays one specific project.
  • userId: displays all projects for a developer or agency.
  • theme: the widget visual theme, if supported by your configuration.
  • showControls and enableSearch: additional controls inside the widget.

​
Container size

Give the container a stable width and minimum height so the page does not jump while the widget loads: 
<div id="gridix-widget-root" style="width: 100%; min-height: 640px;"></div>

​
What to send to your website developer

If a developer or contractor will embed the widget, send them:
  • the ready embed code from Gridix;
  • the page URL where the widget should be added;
  • the display mode: one project through projectId or all projects through userId;
  • the interface language: lang: "en";
  • the minimum container height: min-height: 640px;
  • the requirement to submit a test lead after publishing.

​
Minimum checklist before publishing

1

Open preview

Use Gridix preview or a temporary page on your website.
2

Check the main flow

Confirm that floor plans open, lead forms work, and the selected language is correct.
3

Check mobile

Open the page on a phone or use responsive preview in your browser.
4

Submit a test lead

Make sure the lead appears in Gridix and contains the correct source.
After publishing, open the page in a regular browser without CMS admin access. This checks the real visitor experience.

​
Troubleshooting

Check the script URL, the gridix-widget-root container, the projectId, and browser console errors. A common cause is a CMS block that removes <script> tags.
Make sure the project is published and contains floor plans, apartments, and display-ready data.
Check that lead forms are enabled, the project settings are correct, and a test form submission reaches Gridix.
Set a minimum container height, for example min-height: 640px, and check the styles of the parent block on your website.

​
Best practices

Always preview the widget before publishing it on a live website.
Use lang: "en" for English pages so the widget opens in English by default.
After publishing, test the page in a regular browser, not only in CMS preview mode.

​
Next steps