GETTING STARTED

Getting Started

Get up and running with AppGram in minutes. Pick your platform below.

Installation

React / Next.js

Install the React SDK bash

npm install @appgram/react

React Native

Install the React Native SDK bash

npm install @appgram/react-native

Flutter

Install the Flutter SDK bash

flutter pub add appgram_flutter

iOS (Swift Package Manager)

Package.swift swift

dependencies: [
    // Package URL: see https://appgram.dev/docs/ios-sdk
]

Embed (CDN)

Add to your HTML html

<!-- Auto-initialises from the data attribute -->
<script
  src="https://cdn.appgram.dev/appgram.min.js"
  data-project="your-org/your-project"
></script>

<!-- Or configure first, then load -->
<script>
  window.appgramSettings = {
    projectKey: 'your-org/your-project',
    mode: 'floating',
    position: 'bottom-right'
  };
</script>
<script src="https://cdn.appgram.dev/appgram.min.js"></script>

Quick setup

1. Get your project credentials

Open your AppGram Dashboard and go to Settings → Developer to find your project ID and API keys.

2. Initialise the SDK

React example tsx

import { AppgramProvider } from '@appgram/react';

function App() {
  return (
    <AppgramProvider config={{
      projectId: 'your-project-id',
      orgSlug: 'your-org',
      projectSlug: 'your-project'
    }}>
      <YourApp />
    </AppgramProvider>
  );
}

3. Render your first component

Feature Requests widget tsx

import { useWishes } from '@appgram/react';

function FeatureRequests() {
  const { wishes, isLoading } = useWishes();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      {wishes.map(wish => (
        <div key={wish.id}>
          <h3>{wish.title}</h3>
          <p>{wish.description}</p>
        </div>
      ))}
    </div>
  );
}

Need help?

Read the React SDK reference, browse the guides, or talk to sales if you’re rolling out to a larger team.