echomark

v1.0.4

Published

a month ago

Provides an easy-to-use API and components for adding EchoMark’s interactive feedback system to any frontend framework

0High
0Medium
0Low

ayushjslab

🎯 EhcoMark - Customer Feedback Made Simple

Collect real-time customer feedback with a beautiful, customizable widget. One line of code. Zero hassle.

🌐 Visit EchoMark · 📚 Documentation · 🐛 Report Bug

✨ Why EcoMark?

⚡ Lightning Fast Setup - Install and integrate in under 60 seconds
🎨 Fully Customizable - Match your brand perfectly with our visual customization tools
📊 Real-Time Analytics - Monitor feedback instantly through your dashboard
🔒 Privacy First - GDPR compliant with enterprise-grade security
🚀 Framework Agnostic - Works with React, Vue, Angular, Next.js, and more

🚀 Quick Start

Step 1: Get Your Site ID

Visit EchoMark Dashboard
Sign up for free (no credit card required)
Add your website to get your unique siteId

Step 2: Integrate the Component

React / Next.js

import { Feedback } from 'echomark';

function App() {
  return (
    <div>
      <h1>My Awesome App</h1>
      
      {/* Add the feedback widget */}
      <Feedback siteId="your_site_id_here" />
    </div>
  );
}

export default App;

Vue 3

<template>
  <div>
    <h1>My Awesome App</h1>
    <Feedback siteId="your_site_id_here" />
  </div>
</template>

<script setup>
import { Feedback } from 'echomark';
</script>

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome!</h1>
  
  <div id="feedback-root"></div>
  
  <script type="module">
    import { Feedback } from 'echomark';
    
    const root = document.getElementById('feedback-root');
    Feedback.mount(root, { siteId: 'your_site_id_here' });
  </script>
</body>
</html>

🎨 Customization

Want to match your brand? Head over to the Customization Options on the EchoMark website to:

🎨 Change colors and themes
📍 Adjust widget position
✍️ Customize button text and labels
🌙 Toggle dark/light mode
📱 Configure mobile responsiveness
💬 Add custom fields

All changes sync automatically - no code updates needed!

⚙️ Advanced Configuration

Props & Options

| Prop | Type | Default | Description | |------|------|---------|-------------| | `siteId` | `string` | required | Your unique site identifier from EchoMark dashboard | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Widget position on screen | | `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Color theme (auto detects system preference) | | `trigger` | `'button' \| 'text'` | `'button'` | How the feedback widget appears | | `showOnLoad` | `boolean` | `false` | Auto-open widget when page loads |

📊 View Your Feedback

Once integrated, all feedback appears instantly in your EchoMark Dashboard:

📈 Analytics - Track feedback trends and sentiment analysis
🔔 Notifications - Get alerts for critical feedback
📤 Export - Download feedback as CSV or JSON
🔗 Integrations - Connect with Slack, Discord, webhooks, and more

🛠️ Framework-Specific Examples

// app/layout.tsx
import { Feedback } from 'echomark';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Feedback siteId={process.env.NEXT_PUBLIC_ECOMARK_SITE_ID} />
      </body>
    </html>
  );
}

// pages/_app.tsx
import { Feedback } from 'echomark';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Feedback siteId={process.env.NEXT_PUBLIC_ECOMARK_SITE_ID} />
    </>
  );
}

<!-- app.vue -->
<template>
  <div>
    <NuxtPage />
    <Feedback :siteId="config.public.ecomarkSiteId" />
  </div>
</template>

<script setup>
import { Feedback } from 'echomark';

const config = useRuntimeConfig();
</script>

<!-- +layout.svelte -->
<script>
  import { Feedback } from 'echomark';
  import { PUBLIC_ECOMARK_SITE_ID } from '$env/static/public';
</script>

<slot />
<Feedback siteId={PUBLIC_ECOMARK_SITE_ID} />

🤝 Support & Community

📧 Email: [email protected]
💬 Discord: Join our community
🐦 Twitter: @EchoMarkHQ
📖 Docs: Full Documentation

📄 License

MIT © EchoMark

🙏 Contributing

We welcome contributions! Please see our https://github/ayushjslab/npm-ech-mark for details.

Made with ❤️ by the EchoMark Team

Get Started Free · Star on GitHub ⭐