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: "https://github.com/AppGram/appgram-ios.git", from: "1.0.0")
]

Embed (CDN)

Add to your HTML html

<script src="https://cdn.appgram.dev/embed.js"></script>
<script>
  AppGram.init({
    projectId: 'your-project-id',
    orgSlug: 'your-org',
    projectSlug: 'your-project'
  });
</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.