Customer Support Platform Integration

This package provides a seamless integration with the Taki Popups plugin for customer support platforms. It allows you to easily initialize and configure the popups with user-specific data.

Installation

To use the Taki Popups plugin, install it via npm:

npm install taki-popups-plugin-dev

Usage

Import the TakiPopups module and initialize it with the required configuration. Below is an example of how to set it up:

import { TakiPopups } from 'taki-popups-plugin-dev';

TakiPopups({
  name: 'Adem', // User's name
  memberId: '73924', // Unique member ID
  appId: 123456780, // Application ID
  lang: 'ar', // Language preference
  meta_data: {
    age: 18, // User's age
    state: 'Manouba', // User's state
    phoneNumber: '5289452343', // User's phone number
    // ... additional meta-data
  },
});

Configuration Options

• name: (string) The name of the user.
• memberId: (string) A unique identifier for the user.
• appId: (number) The ID of your application.
• lang: (string) The language code for the popups (e.g., 'ar' for Arabic).
• meta_data: (object) Additional metadata about the user. This can include:
  • age: (number) The user's age.
  • state: (string) The user's state or region.
  • phoneNumber: (string) The user's phone number.
  • ... any other relevant user data.

Example

Here's a complete example of initializing the Taki Popups plugin:

import { TakiPopups } from 'taki-popups-plugin-dev';

TakiPopups({
  name: 'Adem',
  memberId: '73924',
  appId: 123456780,
  lang: 'ar',
  meta_data: {
    age: 18,
    state: 'Manouba',
    phoneNumber: '5289452343',
    // ... additional meta-data
  },
});

Example in a React App Component

Here’s how you can initialize TakiPopups directly in a React app component, ensuring it runs before the return statement:

import React from 'react';
import { TakiPopups } from 'taki-popups-plugin-dev';

const App = () => {
  // Initialize TakiPopups before the return statement
  TakiPopups({
    name: 'Adem',
    memberId: '73924',
    appId: 123456780,
    lang: 'ar',
    meta_data: {
      age: 18,
      state: 'Manouba',
      phoneNumber: '5289452343',
      // ... additional meta-data
    },
  });

  return (
    <div>
      <h1>Welcome to the App</h1>
      {/* Your app content */}
    </div>
  );
};

export default App;

Example in a Landing Page (Guest Mode)

If you're integrating TakiPopups in a landing page where there is no login or signup, you can use guest_mode to initialize the plugin without requiring user-specific data. Here's an example:

import { TakiPopups } from 'taki-popups-plugin-dev';

// Initialize TakiPopups in guest mode
TakiPopups({
  appId: '${getWebsite()}', // Replace with your app ID or dynamic function
  guest_mode: true, // Enable guest mode
});

Explanation:

• appId: Replace '${getWebsite()}' with your actual app ID or a function that dynamically retrieves it.
• guest_mode: Setting guest_mode: true allows the plugin to work without requiring user-specific data like name, memberId, or meta_data.

Example in a Landing Page HTML

If you're adding the plugin directly to an HTML landing page, you can include it like this:

<script type="module">
  import { TakiPopups } from 'taki-popups-plugin-dev';

  TakiPopups({
    appId: 'your-app-id', // Replace with your app ID
    guest_mode: true, // Enable guest mode
  });
</script>

Example in a React App Component (Guest Mode)

Here’s how you can initialize TakiPopups in a React app component for a landing page, using guest_mode and placing it before the return statement:

import React from 'react';
import { TakiPopups } from 'taki-popups-plugin-dev';

const App = () => {
  // Initialize TakiPopups in guest mode before the return statement
  TakiPopups({
    appId: 'your-app-id', // Replace with your app ID
    guest_mode: true, // Enable guest mode
  });

  return (
    <div>
      <h1>Welcome to the Landing Page</h1>
      {/* Your landing page content */}
    </div>
  );
};

export default App;

Support

For any issues or questions, please contact our support team at [email protected].

License

This project is licensed under the MIT License. See the LICENSE file for details.