@hashcoop/referral-popup v1.0.27

Loloyal Referral Popup SDK

Loloyal Referral Popup SDK 是一个轻量级、高度可定制的推荐好友弹窗组件，专为电商和会员系统设计。通过简单的 API，快速为您的网站添加精美的推荐弹窗功能。

✨ 特性

• 🎨 高度可定制 - 自定义外观、布局和内容
• 📱 响应式设计 - 完美适配移动端和桌面端
• 🔌 易于集成 - 支持多种集成方式，适合各类网站和应用
• 🔄 状态管理 - 内置 Jotai 状态管理，处理各种交互场景
• 🛡️ 类型安全 - 使用 TypeScript 开发，提供类型定义
• 🌐 全球化 - 支持多语言内容设置

🚀 快速开始

安装

npm install loloyal-referral-popup
# 或
yarn add loloyal-referral-popup

在 React 项目中使用

import React, { useEffect } from 'react';
import ReferralPopup from '@hashcoop/referral-popup';

function App() {
  useEffect(() => {
    // 初始化弹窗
    const popup = ReferralPopup.init({
      button_color: '#4a90e2',
      button_text_color: '#FFFFFF',
      background_layout: 'left',
      banner_url: 'https://example.com/banner.jpg',
      shape: 16,
      custom_css: '',
      first_step: {
        content: '邀请好友，双方都可获得优惠',
        placeholder: '请输入您的邮箱',
        button_text: '获取优惠码'
      },
      second_step: {
        content: '您已获得10元优惠券',
        button_text: '立即使用'
      }
    });

    // 打开弹窗
    popup.open();

    // 组件卸载时关闭弹窗
    return () => {
      popup.close();
    };
  }, []);

  return (
    <div>
      <h1>我的React应用</h1>
      <button onClick={() => ReferralPopup.open()}>打开推荐弹窗</button>
    </div>
  );
}

export default App;

在普通 JavaScript 项目中使用

// 初始化SDK
const popup = ReferralPopup.init({
  button_color: '#4a90e2',
  button_text_color: '#FFFFFF',
  background_layout: 'left',
  banner_url: 'https://example.com/banner.jpg',
  shape: 16,
  custom_css: '',
  first_step: {
    content: '邀请好友，双方都可获得优惠',
    placeholder: '请输入您的邮箱',
    button_text: '获取优惠码'
  },
  second_step: {
    content: '您已获得10元优惠券',
    button_text: '立即使用'
  }
});

// 自定义样式
popup.setStyles({
  button_color: '#f85555',
  background_layout: 'right',
  shape: 25
});

// 自定义内容
popup.setFirstStepContent({
  content: '邀请好友，双方都可获得优惠',
  placeholder: '请输入您的邮箱',
  button_text: '获取优惠码'
});

// 打开弹窗
popup.open();

📖 API 文档

SDK 方法

配置选项

interface PopupConfig {
  // 样式设置
  custom_css: string; // 自定义CSS
  button_color: string; // 按钮颜色
  button_text_color: string; // 按钮文字颜色
  background_layout: 'left' | 'right' | 'top'; // 布局方式
  banner_url: string; // 横幅图片URL
  shape: number; // 圆角大小 (0-100)

  // 第一步内容
  first_step: {
    content: string; // 主要内容
    placeholder: string; // 输入框占位符
    button_text: string; // 按钮文本
  };

  // 第二步内容
  second_step: {
    content: string; // 主要内容
    button_text: string; // 按钮文本
  };

  // 可选的挂载元素
  mountElement?: HTMLElement | null;
}

高级用法示例

自定义样式

popup.setStyles({
  custom_css: '.loloyal-referral-popup-container { background: red; }',
  button_color: '#f85555',
  button_text_color: '#ffffff',
  background_layout: 'right',
  banner_url: 'https://example.com/banner.jpg',
  shape: 25
});

多语言支持

// 切换到英文
await popup.switchLanguage('en');

// 切换到中文
await popup.switchLanguage('zh');

适配移动端

// 自动检测是否为移动设备
const isMobile = window.innerWidth < 768;
popup.setMobileStyle(isMobile);

// 添加窗口大小变化监听
window.addEventListener('resize', () => {
  popup.setMobileStyle(window.innerWidth < 768);
});

直接展示优惠码

// 跳过邮箱收集步骤，直接显示优惠码
popup.showCouponCode('SAVE20');

📖 文档

查看完整的集成指南获取更多详细信息。

🔧 本地开发

1. 克隆仓库

   git clone https://github.com/channelwill/loloyal-referral-popup.git
   cd loloyal-referral-popup

2. 安装依赖

   npm install

3. 启动开发服务器，浏览器需要拼接：?loloyal_referral_code=Q2Oh2zsSGr9R

   npm dev

4. 构建生产版本

   npm run build

👥 贡献指南

我们欢迎任何形式的贡献！请在提交 PR 前先开一个 issue 讨论您的想法。

📄 许可证

MIT