Examples

Explore real-world Miniback integrations across different platforms and frameworks.

Important: In all examples below, replace https://your-domain.com with your actual Miniback instance URL. You can copy the exact script tag with the correct URL from your project dashboard.

Static HTML


<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is a simple example.</p>
 
    <!-- Miniback Widget -->
    <script
      src="https://your-domain.com/widget.js"
      data-project="my-website"
    ></script>
  </body>
</html>

Website Builders

Wix

Access Code Settings:
- Go to your Wix Editor
- Click Settings > Custom Code
- Select Add Custom Code

Add the Widget:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Configure Placement:
- Choose All Pages or specific pages
- Set Place Code in to Body - end
- Click Apply

Squarespace

Access Code Injection:
- Go to Settings > Advanced > Code Injection
- Or navigate to Settings > Website > Website Tools > Code Injection

Add to Footer:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Save Changes:
- Paste the code in the Footer section
- Click Save

Webflow

Project Settings:
- Open your Webflow project
- Go to Project Settings > Custom Code

Add to Footer Code:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Publish:
- Click Save and Publish your site

WordPress.com

Business Plan Required:
- Custom code requires WordPress.com Business plan or higher
Add via Customizer:
- Go to Appearance > Customize
- Navigate to Additional CSS
- Add the script in a HTML block or use a plugin like “Insert Headers and Footers”
Alternative - Plugin Method:
- Install “Insert Headers and Footers” plugin
- Go to Settings > Insert Headers and Footers
- Add script to Scripts in Footer section

Shopify

Access Theme Editor:
- Go to Online Store > Themes
- Click Actions > Edit code

Edit theme.liquid:

Find theme.liquid in the Layout folder
Add before the closing </body> tag:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Save Changes:
- Click Save to apply changes

Framer

Custom Code Component:
- Add a Custom Code component to your page
- Or use Site Settings > General > Custom Code

Add Widget Script:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Position:
- Place the Custom Code component where you want it
- Or add to site-wide custom code for all pages

Ghost

Code Injection:
- Go to Settings > Code Injection
- Or Settings > Advanced > Code Injection

Site Footer:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Save:
- Add to Site Footer section
- Click Save

Notion (with Super.so or similar)

Custom Code Block:
- Add a Code block to your Notion page
- Set language to HTML

Widget Code:


<script
  src="https://your-domain.com/widget.js"
  data-project="your-project-slug"
></script>

Publish:
- Publish your Notion page through your chosen platform

React/Next.js

Simple Component


import { useEffect } from "react";
 
export function MinibackWidget({ projectSlug }) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://your-domain.com/widget.js";
    script.setAttribute("data-project", projectSlug);
    document.body.appendChild(script);
 
    return () => {
      // Cleanup when component unmounts
      const existingScript = document.querySelector(
        `script[data-project="${projectSlug}"]`
      );
      if (existingScript) {
        document.body.removeChild(existingScript);
      }
    };
  }, [projectSlug]);
 
  return null;
}
 
// Usage
<MinibackWidget projectSlug="your-project-slug" />;

Context Provider Pattern


import React, { createContext, useContext, useEffect } from "react";
 
const FeedbackContext = createContext();
 
export function FeedbackProvider({ children, projectSlug }) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://your-domain.com/widget.js";
    script.setAttribute("data-project", projectSlug);
    document.body.appendChild(script);
 
    return () => {
      const existingScript = document.querySelector(
        `script[data-project="${projectSlug}"]`
      );
      if (existingScript) {
        document.body.removeChild(existingScript);
      }
    };
  }, [projectSlug]);
 
  return (
    <FeedbackContext.Provider value={{ projectSlug }}>
      {children}
    </FeedbackContext.Provider>
  );
}
 
// Usage in your app
export default function App() {
  return (
    <FeedbackProvider projectSlug="my-react-app">
      <div>
        <h1>My App</h1>
        <p>Your content here...</p>
      </div>
    </FeedbackProvider>
  );
}

Vue.js


<template>
  <div></div>
</template>
 
<script>
export default {
  props: {
    projectSlug: {
      type: String,
      required: true,
    },
  },
  mounted() {
    const script = document.createElement("script");
    script.src = "https://your-domain.com/widget.js";
    script.setAttribute("data-project", this.projectSlug);
    document.body.appendChild(script);
  },
  beforeDestroy() {
    const existingScript = document.querySelector(
      `script[data-project="${this.projectSlug}"]`
    );
    if (existingScript) {
      document.body.removeChild(existingScript);
    }
  },
};
</script>

CMS Platforms

WordPress (Self-hosted)


function add_miniback_widget() {
    ?>
    <script
      src="https://your-domain.com/widget.js"
      data-project="my-wordpress-site"
    ></script>
    <?php
}
add_action('wp_footer', 'add_miniback_widget');

Drupal


function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    [
      '#tag' => 'script',
      '#attributes' => [
        'src' => 'https://your-domain.com/widget.js',
        'data-project' => 'my-drupal-site',
      ],
    ],
    'miniback_widget',
  ];
}

Website Builder Tips

General Guidelines

Footer Placement: Most builders work best when the script is placed in the footer
All Pages: Enable the widget on all pages for consistent feedback collection
Test Mode: Use a test project slug initially to verify the widget appears correctly
Mobile Responsive: The widget automatically adapts to mobile devices

Common Issues

Widget Not Appearing: Check if custom code is enabled in your plan
Multiple Widgets: Ensure you’re not adding the script multiple times
Caching: Clear your site cache after adding the widget
Preview Mode: Some builders don’t show widgets in preview mode

Plan Requirements

Platform	Custom Code Access
Wix	Premium plans
Squarespace	Personal plan and above
Webflow	Paid plans
WordPress.com	Business plan and above
Shopify	All plans
Framer	Pro plan and above

Production Deployment

When deploying to production:

Update Script URL: Change from localhost to your production domain
Configure Domains: Set up allowed domains for security
Test Thoroughly: Verify the widget works across all pages
Monitor Performance: Check that the widget doesn’t impact page load times

Advanced Use Cases

Conditional Loading: Load widget based on user roles or page types
Custom Form Integration: Integrate with existing feedback forms
Analytics Hooks: Track widget interactions with your analytics platform

Installation - Basic setup guide
Customization - Appearance and behavior options
Troubleshooting - Common issues and solutions