Integration Snippets

This document provides ready-to-use code snippets for integrating the InsightEmbed widget into your website using different technologies and frameworks.

Basic HTML Integration

The simplest way to add InsightEmbed to any website is by including our script in your HTML:

<!-- Add this to your HTML head or before the closing body tag -->
<script src="https://cdn.insightembed.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    InsightEmbed.init({
      apiKey: 'YOUR_WIDGET_API_KEY'
    });
  });
</script>

Asynchronous Loading

For better page performance, load the widget asynchronously:

<script>
  // Async loading to avoid blocking page rendering
  (function(w, d, s, o) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(o)) return;
    js = d.createElement(s); js.id = o;
    js.src = 'https://cdn.insightembed.com/widget.js';
    js.async = true;
    js.onload = function() {
      InsightEmbed.init({
        apiKey: 'YOUR_WIDGET_API_KEY'
      });
    };
    fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'insight-embed-js'));
</script>

JavaScript Frameworks

React

Using React Component

Install the official React component:

npm install @insightembed/react
# or
yarn add @insightembed/react

Use the component in your React application:

import React from 'react';
import { InsightEmbed } from '@insightembed/react';

function App() {
  return (
    <div className="App">
      <h1>My Website</h1>
      <InsightEmbed apiKey="YOUR_WIDGET_API_KEY" />
    </div>
  );
}

export default App;

Manual Integration in React

If you prefer not to use the component, you can integrate the widget manually:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Load the script
    const script = document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.async = true;
    script.onload = () => {
      window.InsightEmbed.init({
        apiKey: 'YOUR_WIDGET_API_KEY'
      });
    };
    document.body.appendChild(script);

    // Cleanup on component unmount
    return () => {
      document.body.removeChild(script);
      if (window.InsightEmbed && window.InsightEmbed.destroy) {
        window.InsightEmbed.destroy();
      }
    };
  }, []);

  return (
    <div className="App">
      <h1>My Website</h1>
    </div>
  );
}

export default App;

Vue.js

Using Vue Component

Install the official Vue component:

npm install @insightembed/vue
# or
yarn add @insightembed/vue

Use the component in your Vue application:

<template>
  <div id="app">
    <h1>My Website</h1>
    <InsightEmbed :api-key="apiKey" />
  </div>
</template>

<script>
import { InsightEmbed } from '@insightembed/vue';

export default {
  name: 'App',
  components: {
    InsightEmbed
  },
  data() {
    return {
      apiKey: 'YOUR_WIDGET_API_KEY'
    };
  }
};
</script>

Manual Integration in Vue

<template>
  <div id="app">
    <h1>My Website</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.async = true;
    script.onload = () => {
      window.InsightEmbed.init({
        apiKey: 'YOUR_WIDGET_API_KEY'
      });
    };
    document.body.appendChild(script);
  },
  beforeDestroy() {
    // Find and remove the script
    const scripts = document.getElementsByTagName('script');
    for (let i = 0; i < scripts.length; i++) {
      if (scripts[i].src.includes('insightembed')) {
        document.body.removeChild(scripts[i]);
        break;
      }
    }
    
    // Destroy the widget instance
    if (window.InsightEmbed && window.InsightEmbed.destroy) {
      window.InsightEmbed.destroy();
    }
  }
};
</script>

Angular

Using Angular Component

Install the official Angular component:

npm install @insightembed/angular
# or
yarn add @insightembed/angular

Import the module in your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InsightEmbedModule } from '@insightembed/angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    InsightEmbedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use the component in your template:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>My Website</h1>
    <insight-embed apiKey="YOUR_WIDGET_API_KEY"></insight-embed>
  `
})
export class AppComponent {}

Manual Integration in Angular

Create a service to load the script:

// insight-embed.service.ts
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class InsightEmbedService {
  private scriptLoaded = false;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  loadScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      if (this.scriptLoaded) {
        resolve();
        return;
      }

      const script = this.document.createElement('script');
      script.src = 'https://cdn.insightembed.com/widget.js';
      script.async = true;
      script.defer = true;
      script.onload = () => {
        this.scriptLoaded = true;
        resolve();
      };
      script.onerror = (error) => reject(error);
      this.document.body.appendChild(script);
    });
  }

  initWidget(config: any): void {
    if (window['InsightEmbed'] && window['InsightEmbed'].init) {
      window['InsightEmbed'].init(config);
    }
  }

  destroyWidget(): void {
    if (window['InsightEmbed'] && window['InsightEmbed'].destroy) {
      window['InsightEmbed'].destroy();
    }
  }
}

Use the service in your component:

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { InsightEmbedService } from './insight-embed.service';

@Component({
  selector: 'app-root',
  template: '<h1>My Website</h1>'
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(private insightEmbedService: InsightEmbedService) {}

  ngOnInit() {
    this.insightEmbedService.loadScript().then(() => {
      this.insightEmbedService.initWidget({
        apiKey: 'YOUR_WIDGET_API_KEY'
      });
    });
  }

  ngOnDestroy() {
    this.insightEmbedService.destroyWidget();
  }
}

Content Management Systems

WordPress

Using the Plugin

The easiest way to add InsightEmbed to WordPress is using our official plugin:

1. Go to Plugins > Add New in your WordPress admin
2. Search for "InsightEmbed"
3. Click "Install Now" and then "Activate"
4. Go to Settings > InsightEmbed and enter your API key

Manual Integration

Add the following code to your theme's functions.php file:

function add_insight_embed_script() {
    ?>
    <script src="https://cdn.insightembed.com/widget.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            InsightEmbed.init({
                apiKey: 'YOUR_WIDGET_API_KEY'
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_insight_embed_script');

Shopify

Add the InsightEmbed widget to your Shopify store:

1. Go to Online Store > Themes
2. Click "Actions" > "Edit code"
3. Open the theme.liquid file
4. Add the following code just before the closing </body> tag:

<script src="https://cdn.insightembed.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    InsightEmbed.init({
      apiKey: 'YOUR_WIDGET_API_KEY'
    });
  });
</script>

Webflow

Add the InsightEmbed widget to your Webflow site:

1. Go to Project Settings > Custom Code
2. Add the following code to the "Footer Code" section:

<script src="https://cdn.insightembed.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    InsightEmbed.init({
      apiKey: 'YOUR_WIDGET_API_KEY'
    });
  });
</script>

Advanced Integration

Lazy Loading

Load the widget only when needed:

<button id="load-insight-embed">Load Analysis Widget</button>

<script>
  document.getElementById('load-insight-embed').addEventListener('click', function() {
    // Only load the widget when the button is clicked
    var script = document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.onload = function() {
      InsightEmbed.init({
        apiKey: 'YOUR_WIDGET_API_KEY'
      });
    };
    document.body.appendChild(script);
    
    // Hide the button after loading
    this.style.display = 'none';
  });
</script>

Conditional Loading

Load the widget based on user preferences:

<script>
  // Check if the user has previously opted in
  if (localStorage.getItem('insightEmbedEnabled') === 'true') {
    var script = document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.onload = function() {
      InsightEmbed.init({
        apiKey: 'YOUR_WIDGET_API_KEY'
      });
    };
    document.body.appendChild(script);
  }
</script>

Multiple Widgets

You can initialize multiple widgets with different configurations on the same page:

<div id="widget-container-1"></div>
<div id="widget-container-2"></div>

<script src="https://cdn.insightembed.com/widget.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize first widget
    InsightEmbed.init({
      apiKey: 'YOUR_WIDGET_API_KEY',
      position: {
        type: 'inline',
        container: '#widget-container-1'
      },
      branding: {
        buttonLabel: 'Analyze Text'
      }
    });
    
    // Initialize second widget
    InsightEmbed.init({
      apiKey: 'YOUR_WIDGET_API_KEY',
      position: {
        type: 'inline',
        container: '#widget-container-2'
      },
      branding: {
        buttonLabel: 'Analyze Image'
      },
      features: {
        textAnalysis: false,
        imageAnalysis: true
      }
    });
  });
</script>

Troubleshooting

Script Loading Issues

If the widget script fails to load:

1. Check your internet connection
2. Verify that the script URL is correct
3. Check for any Content Security Policy (CSP) restrictions
4. Look for JavaScript errors in the browser console

Widget Not Appearing

If the widget doesn't appear after initialization:

1. Verify that your API key is correct
2. Check if the widget is hidden due to visibility settings
3. Inspect the browser console for any error messages
4. Ensure there are no CSS conflicts hiding the widget

API Key Issues

If you see authentication errors:

1. Verify that your API key is correct
2. Check if your domain is allowed in the API key settings
3. Ensure your subscription is active

For more troubleshooting help, see the Common Errors guide.