Embedding a local grid | Insites Help Center

Set-up instructions

Step 1: Add the Script tag

Add the following script tag to your HTML page, typically in the <head> section or before the closing </body> tag:

<script src="https://app.insites.com/js/grid-embed-widget.js"></script>

Note: The script is also available from your white-labelled domains, e.g., customer-name.insites.com/js/grid-embed-widget.js

Step 2: Create a container element

Add a container element where the grid will be displayed:

<div id="custom-grid"></div>

Step 3: Retrieve your public API key

Log into your Insites account
Navigate to Account Settings → API & Integrations
Generate & Copy a Public API key

Take care not to use a private API key! Only public API keys should be used for embedding a local grid.

Step 4: Intialise the Grid

Add the initialisation script after the embed script has loaded:

<script>
  // Required: Set your API key
  localGrid.setApiKey('your-api-key');
  
  // Required: Choose ONE of the following options
  // Option A: Use Grid GUID
  // localGrid.setLocalGridGuid('your-grid-guid');
  
  // Option B: Use Report ID and Keyword
  localGrid.setReportGrid('your-report-id', 'your-keyword');
  
  // Required: Set the container ID (defaults to custom-grid)
  localGrid.setContainerId('custom-grid');
  
  // Optional: Configure popover (disabled by default)
  localGrid.setPopover(false);
  
  // Optional: Customize dimensions and styling
  // localGrid.setWidth('800px');
  // localGrid.setHeight(600);
  // localGrid.setBorder('2px solid #0066cc');
  
  // Required: Render the grid
  localGrid.render();
</script>

Configuration options

Required Methods

setApiKey(key) - Your Insites Public API key
setLocalGridGuid(guid) OR setReportGrid(reportId, keyword) - Specify which grid to display
setContainerId(id) - The ID of the HTML element to render the grid into
render() - Renders the grid (must be called after all configuration)

Optional Methods

setPopover(boolean) - Enable/disable the popover feature (default: false)
setWidth(value) - Set grid width (e.g., '800px', '100%')
setHeight(value) - Set grid height (e.g., 600, '500px')
setBorder(value) - Set border styling (e.g., '2px solid #0066cc')

Complete example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Grid Embed Example</title>
  <script src="https://www.insites.com/js/grid-embed-widget.js"></script>
</head>
<body>
  <h1>My Local Grid</h1>
  <div id="custom-grid"></div>
  
  <script>
    localGrid.setApiKey('your-api-key');
    localGrid.setReportGrid('your-report-id', 'your-keyword');
    localGrid.setContainerId('custom-grid');
    localGrid.setWidth('100%');
    localGrid.setHeight(600);
    localGrid.render();
  </script>
</body>
</html>

Competitor suggestions API