Adding InsightEmbed to Your Site

This guide provides platform-specific instructions for adding the InsightEmbed widget to different types of websites. While the basic installation works for most sites, these instructions offer optimized approaches for specific platforms.

Content Management Systems

WordPress

1. Log in to your WordPress admin dashboard
2. Go to Appearance > Theme Editor
3. Select your active theme
4. Edit the footer.php file
5. Add the InsightEmbed script just before the closing </body> tag:

<script src="https://cdn.insightembed.com/widget.js" data-api-key="YOUR_API_KEY" data-domain="yourdomain.com"></script>

6. Save the changes

Alternatively, you can use a plugin like "Header and Footer Scripts" to add the code without editing theme files.

Shopify

1. From your Shopify admin, go to Online Store > Themes
2. Click Actions > Edit code for your active theme
3. Under the Layout folder, open the theme.liquid file
4. Add the InsightEmbed script just before the closing </body> tag
5. Click Save

Wix

1. From your Wix dashboard, go to Settings > Custom Code
2. Click + Add Custom Code
3. Paste the InsightEmbed script
4. Set placement to Body - end
5. Apply to All pages
6. Click Apply

JavaScript Frameworks

React

Create a component for the widget:

// InsightEmbedWidget.jsx
import { useEffect } from 'react';

const InsightEmbedWidget = ({ apiKey, domain }) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.dataset.apiKey = apiKey;
    script.dataset.domain = domain;
    script.async = true;
    
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, [apiKey, domain]);
  
  return null;
};

export default InsightEmbedWidget;

Then use it in your app:

// App.jsx
import InsightEmbedWidget from './InsightEmbedWidget';

function App() {
  return (
    <div className="App">
      {/* Your app content */}
      <InsightEmbedWidget 
        apiKey="YOUR_API_KEY" 
        domain="yourdomain.com" 
      />
    </div>
  );
}

Vue.js

Create a component:

<!-- InsightEmbedWidget.vue -->
<template>
  <!-- Widget is injected via script -->
</template>

<script>
export default {
  name: 'InsightEmbedWidget',
  props: {
    apiKey: {
      type: String,
      required: true
    },
    domain: {
      type: String,
      required: true
    }
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.dataset.apiKey = this.apiKey;
    script.dataset.domain = this.domain;
    script.async = true;
    
    document.body.appendChild(script);
    
    this.$once('hook:beforeDestroy', () => {
      document.body.removeChild(script);
    });
  }
};
</script>

Use it in your app:

<template>
  <div id="app">
    <!-- Your app content -->
    <insight-embed-widget 
      api-key="YOUR_API_KEY" 
      domain="yourdomain.com"
    />
  </div>
</template>

<script>
import InsightEmbedWidget from './components/InsightEmbedWidget.vue';

export default {
  components: {
    InsightEmbedWidget
  }
};
</script>

Angular

Create a service and component:

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

@Injectable({
  providedIn: 'root'
})
export class InsightEmbedService {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  initialize(apiKey: string, domain: string): void {
    const script = this.document.createElement('script');
    script.src = 'https://cdn.insightembed.com/widget.js';
    script.dataset.apiKey = apiKey;
    script.dataset.domain = domain;
    script.async = true;
    
    this.document.body.appendChild(script);
  }
}

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

@Component({
  selector: 'app-insight-embed',
  template: ''
})
export class InsightEmbedComponent implements OnInit {
  @Input() apiKey!: string;
  @Input() domain!: string;

  constructor(private insightEmbedService: InsightEmbedService) {}

  ngOnInit(): void {
    this.insightEmbedService.initialize(this.apiKey, this.domain);
  }
}

Use it in your app component:

<!-- app.component.html -->
<div>
  <!-- Your app content -->
  <app-insight-embed 
    apiKey="YOUR_API_KEY" 
    domain="yourdomain.com"
  ></app-insight-embed>
</div>

Next Steps

After adding the widget to your site:

1. Test the widget in preview mode
2. Configure widget appearance
3. Set up domain validation

If you encounter any issues, please refer to our troubleshooting guide or contact our support team at support@insightembed.com.