Skip to main content

​
Installing AppSloth

Add AppSloth to your application using your preferred package manager. 
npm install appsloth

​
Environment Setup

Add your AppSloth Client ID to your environment variables. After creating a project, you can find your Client ID on the home page of your AppSloth Dashboard. 
NEXT_PUBLIC_APPSLOTH_CLIENT_ID=your_client_id_here

​
Adding the Provider

Add the AppSloth Provider at the root of your application to enable AppSloth functionality throughout your app. 
// app/layout.js or app/layout.tsx
import { AppSlothProvider } from 'appsloth/provider';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AppSlothProvider 
          userEmail="[email protected]" // User's email for identification
          customerId="project-123" // For business apps: project/workspace ID
          // OR
          // customerId="user-456" // For consumer apps: user ID
        >
          {children}
        </AppSlothProvider>
      </body>
    </html>
  );
}
For business applications, use a project or workspace ID as the customerId. For consumer applications, use the individual user’s ID.

​
Next Steps

Now that you’ve set up AppSloth in your application, add some components into your app:

Banners

Create eye-catching banners to highlight important announcements

Feedback

Collect and manage user feedback to improve your product

Inbox

Send targeted in-app messages and alerts to your users

Retention

Collect feedback and present salvage offers when users try to cancel