Skip to main content

​
Widget Embedding

Embed interactive Gridix floor plans on your website with a single line of code. This guide covers widget generation, configuration, and embedding.

​
Overview

Gridix widgets are embeddable interactive floor plans that you can add to any website. They include:
  • Interactive Floor Plans: Clickable apartment layouts
  • Lead Collection: Built-in inquiry forms
  • Multi-language Support: Display in multiple languages
  • Responsive Design: Works on all devices
  • Customizable: Match your brand colors

​
Generating Widget Code

​
Step 1: Access Widget Generator

1

Navigate to Widgets

Go to “Widgets” tab in the admin dashboard.
2

Select Project

Choose which project to embed:
  • Single project: Select specific project
  • All projects: Show all your projects
3

Configure Language

Set default language for the widget:
  • English (en)
  • Russian (ru)
  • Georgian (ka)
  • Arabic (ar)

​
Step 2: Generate Code

1

Review Configuration

Verify project and language settings.
2

Copy Code

Click “Copy Code” to copy the embed code to clipboard.
3

Code Ready

The code is ready to paste into your website.

​
Widget Code Structure

​
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>

​
Code Components

  • Container Div: <div id="gridix-widget-root"></div> - Where widget appears
  • Script Source: Loads Gridix widget library
  • Initialization: Configures widget with your settings

​
Embedding on Your Website

​
HTML Websites

1

Open HTML File

Open your website’s HTML file in a text editor.
2

Find Insertion Point

Locate where you want the widget to appear.
3

Paste Code

Paste the widget code at the desired location.
4

Save and Publish

Save the file and publish to your web server.

​
WordPress

1

Edit Page/Post

Edit the page or post where you want the widget.
2

Add HTML Block

Add an “HTML” or “Custom HTML” block.
3

Paste Code

Paste the widget code into the HTML block.
4

Publish

Publish or update the page.

​
CMS Platforms

For other CMS platforms (Drupal, Joomla, etc.):
  • Find HTML/code insertion option
  • Paste widget code
  • Save changes

​
Widget Configuration Options

​
Project Selection

// Single project
projectId: "your-project-id"

// All projects (for developers)
userId: "your-user-id"

​
Language Configuration

lang: "en"  // English
lang: "ru"  // Russian
lang: "ka"  // Georgian
lang: "ar"  // Arabic

​
Additional Options

window.GridixWidget.init({
  lang: "en",
  projectId: "project-id",
  theme: "light",        // Light or dark theme
  showControls: true,    // Show zoom/pan controls
  enableSearch: true     // Enable apartment search
});

​
Widget Preview

​
Testing Before Embedding

1

Generate Code

Create widget code in the admin dashboard.
2

Click Preview

Click “Preview” button to see how widget looks.
3

Review Widget

Check:
  • Floor plan display
  • Interactive features
  • Language settings
  • Mobile responsiveness
4

Make Adjustments

Return to settings to adjust if needed.

​
Preview Features

  • Full Widget Display: See exact widget appearance
  • Interactive Testing: Test all widget features
  • Mobile Preview: Check mobile responsiveness
  • Language Switching: Test language display

​
Multi-Language Widgets

​
Language Support

Widgets support multiple languages:
  • English (en): Default language
  • Russian (ru): Russian interface
  • Georgian (ka): Georgian interface
  • Arabic (ar): Arabic interface (RTL support)

​
Language Switching

Configure language in widget code: 
lang: "en"  // Set default language
Customers can switch languages if you enable language toggle in widget settings.

​
Widget Customization

​
Styling Options

While embedded, widgets can be customized with CSS: 
#gridix-widget-root {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

​
Container Sizing

Set widget dimensions: 
<div id="gridix-widget-root" style="width: 100%; height: 600px;"></div>

​
Troubleshooting

​
Common Issues

  • Verify script URL is correct
  • Check browser console for errors
  • Ensure container div exists
  • Verify project ID is correct
  • Check project is published
  • Verify project has floor plans
  • Check internet connection
  • Clear browser cache
  • Verify lead forms are enabled
  • Check widget configuration
  • Review project settings
  • Test form submission

​
Best Practices

Test Before Publishing: Always preview widget before embedding on live site.
Responsive Design: Ensure widget container adapts to different screen sizes.
Loading Performance: Widget loads asynchronously and won’t block page rendering.
Security: Widget code is secure and doesn’t require additional security measures.

​
Advanced Usage

​
Multiple Widgets

Embed multiple widgets on the same page: 
<!-- First project -->
<div id="gridix-widget-root-1"></div>
<script>
  window.GridixWidget && window.GridixWidget.init({
    containerId: "gridix-widget-root-1",
    projectId: "project-1-id",
    lang: "en"
  });
</script>

<!-- Second project -->
<div id="gridix-widget-root-2"></div>
<script>
  window.GridixWidget && window.GridixWidget.init({
    containerId: "gridix-widget-root-2",
    projectId: "project-2-id",
    lang: "en"
  });
</script>

​
Dynamic Loading

Load widget dynamically with JavaScript: 
function loadGridixWidget(projectId, containerId) {
  const container = document.getElementById(containerId);
  if (!container) return;
  
  const script = document.createElement('script');
  script.src = 'https://your-domain.com/widget.js';
  script.onload = function() {
    window.GridixWidget.init({
      containerId: containerId,
      projectId: projectId,
      lang: "en"
    });
  };
  document.head.appendChild(script);
}

​
Next Steps