This guide will walk you through the process of installing and integrating Poper into your React application using the Poper React SDK.
1. Install the Poper React SDK:
Open your React project's terminal: Navigate to your React project's root directory in your terminal.
Install the SDK: Use either npm or yarn to install the poper-react-sdk package:
npm install poper-react-sdk
# or
yarn add poper-react-sdk
2. Integrate Poper into Your Component:
Import Poper: Import the Poper function from the poper-react-sdk package into your desired React component (usually your main App.js or index.js):
import { Poper } from 'poper-react-sdk';Initialize Poper: Call the Poper function within your component, passing your Poper account ID as an argument. You can find your account ID in the "Code" section of your Poper dashboard.
function App() {
// Initialize Poper with your account ID
Poper({
accountID: "your-account-id",
// Replace with your actual account ID
});
return (
<div>
{/* Your app content */}
</div>
);
}3. Locate Your Account ID:
Access Poper Dashboard: Log in to your Poper account and navigate to the main dashboard.
Go to Code Section: Find and click on the "Code" section.
Copy Account ID: Your account ID will be displayed in the code snippet. Copy it.
Important Notes:
Replace Placeholder: Remember to replace "your-actual-account-id" with your actual Poper account ID.
Placement: It's recommended to initialize Poper in your main component or a high-level component to ensure it's loaded on all pages of your application.
Testing: After integrating Poper, test your website thoroughly to ensure that your popups and widgets are displayed correctly.
Troubleshooting: If you encounter any issues, consult the Poper documentation or contact Poper support for assistance.