Prerequisites
Before embedding local grid on a webpage, ensure you have:
Access to your website's HTML
A valid Insites Public API key (available from Account Settings → API & Integrations)
Either a Report ID + Keyword OR a Grid GUID
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: If you use a white-labelled Insites domain, load the script from that domain instead. 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 your Public API key
Step 4: Initialise 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 keysetLocalGridGuid(guid)ORsetReportGrid(reportId, keyword)- Specify which grid to displaysetContainerId(id)- The ID of the HTML element to render the grid intorender()- 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>