Visual Inbox

Fetching Inbox Details

Upshot.ai provides all activity information to the application, which is to be stored and later used in dynamic help sections within the app. This powerful feature allows you to organize and display activities in specific app sections based on your needs.

Examples:

To display an activity (say tutorials) only in help section
To show mini-games exclusively in a funzone area
To organize surveys and polls in a feedback section
To create context-specific activity displays throughout your app

How to Fetch Inbox Details

JavaScriptTypeScript

javascript

import Upshot from "react-native-upshotsdk";
// Fetch inbox information for activities
Upshot.fetchInboxInfo(function (response) {
  // Response is in JSON string, parse it
  const inboxData = JSON.parse(response);
  console.log("Inbox activities:", inboxData);

  // Process each activity category
  inboxData.forEach((category) => {
    console.log("Category:", category.name);
    console.log("Activities:", category.activities);

    // Filter activities by type if needed
    const badgeActivities = category.activities.filter(
      (activity) => activity.type === 9
    );
    const tutorialActivities = category.activities.filter(
      (activity) => activity.type === 7
    );

    console.log("Badge activities:", badgeActivities);
    console.log("Tutorial activities:", tutorialActivities);
  });
});

typescript

import Upshot from "react-native-upshotsdk";
interface InboxActivity {
  type: number;
  taken: string;
  activityId: string;
  actName: string;
  tags: string[];
}

interface InboxCategory {
  name: string;
  activities: InboxActivity[];
}

// Fetch inbox information for activities
Upshot.fetchInboxInfo((response: string) => {
  // Response is in JSON string, parse it
  const inboxData: InboxCategory[] = JSON.parse(response);
  console.log("Inbox activities:", inboxData);

  // Process each activity category
  inboxData.forEach((category: InboxCategory) => {
    console.log("Category:", category.name);
    console.log("Activities:", category.activities);

    // Filter activities by type if needed
    const badgeActivities = category.activities.filter(
      (activity) => activity.type === 9
    );
    const tutorialActivities = category.activities.filter(
      (activity) => activity.type === 7
    );

    console.log("Badge activities:", badgeActivities);
    console.log("Tutorial activities:", tutorialActivities);
  });
});

Sample Inbox Response Structure

The inbox details response contains categorized activities:

json

[
  {
    "name": "Badge",
    "activities": [
      {
        "type": 9,
        "taken": "takenornot",
        "activityId": "58f9ec9e2b2f15c5608b456958fa080a2b2f15f8188b456c",
        "actName": "New Badge",
        "tags": ["Tag"]
      }
    ]
  },
  {
    "name": "Tutorials",
    "activities": [
      {
        "type": 7,
        "taken": "not_taken",
        "activityId": "59a1bc8e3d4f16d7719c567a59a2ef1b3d4f17e8729c567d",
        "actName": "App Tutorial",
        "tags": ["Help", "Onboarding"]
      }
    ]
  }
]

Activity Types Reference

Type	Activity Name	Description
0	Survey	User feedback surveys
1	Rating	App rating requests
5	Opinion Poll	User opinion collection
7	Tutorials	Step-by-step guides
8	In-App Message	Direct messages to users
9	Badges	Achievement badges
10	Screen Tips	Contextual help tips
11	Trivia	Interactive trivia games
12	Custom Action	Custom app actions
13	Mini Games	Engaging mini-games

Displaying Activities by ID

Once you have activity IDs from the inbox, you can display specific activities:

JavaScriptTypeScript

javascript

// Show a specific activity using its ID from inbox
function showActivityFromInbox(activityId) {
  Upshot.showActivityWithId(activityId);
}

// Example: Show a badge activity from inbox
Upshot.fetchInboxInfo(function (response) {
  const inboxData = JSON.parse(response);

  // Find badge activities
  const badgeCategory = inboxData.find((category) => category.name === "Badge");
  if (badgeCategory && badgeCategory.activities.length > 0) {
    const firstBadgeActivity = badgeCategory.activities[0];

    // Show the badge activity
    showActivityFromInbox(firstBadgeActivity.activityId);
  }
});

typescript

// Show a specific activity using its ID from inbox
function showActivityFromInbox(activityId: string): void {
  Upshot.showActivityWithId(activityId);
}

// Example: Show a badge activity from inbox
Upshot.fetchInboxInfo((response: string) => {
  const inboxData: InboxCategory[] = JSON.parse(response);

  // Find badge activities
  const badgeCategory = inboxData.find((category) => category.name === "Badge");
  if (badgeCategory && badgeCategory.activities.length > 0) {
    const firstBadgeActivity = badgeCategory.activities[0];

    // Show the badge activity
    showActivityFromInbox(firstBadgeActivity.activityId);
  }
});

Use Cases for Inbox Details

Dynamic Help Sections: Store tutorial and guide activities for later use in help menus
Funzone Areas: Display mini-games and trivia activities exclusively in entertainment sections
Feedback Centers: Organize surveys, polls, and rating activities in dedicated feedback areas
Activity Management: Track which activities are available vs. completed across different app sections
Content Organization: Group activities by category, type, or intended display location

Building App Sections with Inbox Data

Create different sections in your app using activity data:

JavaScriptTypeScript

javascript

// Create different app sections using inbox data
function buildAppSections() {
  Upshot.fetchInboxInfo(function (response) {
    const inboxData = JSON.parse(response);

    // Initialize sections
    const appSections = {
      helpSection: [],
      funzone: [],
      feedbackCenter: [],
      achievements: [],
    };

    // Organize activities by intended app section
    inboxData.forEach((category) => {
      category.activities.forEach((activity) => {
        // Route activities to appropriate sections based on type
        switch (activity.type) {
          case 7: // Tutorials
          case 10: // Screen Tips
            appSections.helpSection.push({
              id: activity.activityId,
              name: activity.actName,
              type: "help",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;

          case 11: // Trivia
          case 13: // Mini Games
            appSections.funzone.push({
              id: activity.activityId,
              name: activity.actName,
              type: "entertainment",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;

          case 0: // Survey
          case 1: // Rating
          case 5: // Opinion Poll
            appSections.feedbackCenter.push({
              id: activity.activityId,
              name: activity.actName,
              type: "feedback",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;

          case 9: // Badges
            appSections.achievements.push({
              id: activity.activityId,
              name: activity.actName,
              type: "achievement",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;
        }
      });
    });

    // Render each section
    renderHelpSection(appSections.helpSection);
    renderFunzone(appSections.funzone);
    renderFeedbackCenter(appSections.feedbackCenter);
    renderAchievements(appSections.achievements);
  });
}

// Render help section with tutorials and tips
function renderHelpSection(helpActivities) {
  console.log(
    "Building Help Section with",
    helpActivities.length,
    "activities"
  );
  helpActivities.forEach((activity) => {
    console.log(
      "📚 Help:",
      activity.name,
      activity.taken ? "(Completed)" : "(Available)"
    );
  });
  // Implement your help section UI here
}

// Render funzone with games and trivia
function renderFunzone(funActivities) {
  console.log("Building Funzone with", funActivities.length, "activities");
  funActivities.forEach((activity) => {
    console.log(
      "🎮 Fun:",
      activity.name,
      activity.taken ? "(Played)" : "(New!)"
    );
  });
  // Implement your funzone UI here
}

// Render feedback center with surveys and polls
function renderFeedbackCenter(feedbackActivities) {
  console.log(
    "Building Feedback Center with",
    feedbackActivities.length,
    "activities"
  );
  feedbackActivities.forEach((activity) => {
    console.log(
      "📝 Feedback:",
      activity.name,
      activity.taken ? "(Submitted)" : "(Pending)"
    );
  });
  // Implement your feedback center UI here
}

// Render achievements section with badges
function renderAchievements(achievementActivities) {
  console.log(
    "Building Achievements with",
    achievementActivities.length,
    "activities"
  );
  achievementActivities.forEach((activity) => {
    console.log(
      "🏆 Achievement:",
      activity.name,
      activity.taken ? "(Earned)" : "(Available)"
    );
  });
  // Implement your achievements UI here
}

// Show activity when user clicks on it
function showSectionActivity(activityId, sectionType) {
  console.log(`Opening ${sectionType} activity:`, activityId);
  Upshot.showActivityWithId(activityId);
}

typescript

interface SectionActivity {
  id: string;
  name: string;
  type: string;
  tags: string[];
  taken: boolean;
}

interface AppSections {
  helpSection: SectionActivity[];
  funzone: SectionActivity[];
  feedbackCenter: SectionActivity[];
  achievements: SectionActivity[];
}

// Create different app sections using inbox data
function buildAppSections(): void {
  Upshot.fetchInboxInfo((response: string) => {
    const inboxData: InboxCategory[] = JSON.parse(response);

    // Initialize sections
    const appSections: AppSections = {
      helpSection: [],
      funzone: [],
      feedbackCenter: [],
      achievements: [],
    };

    // Organize activities by intended app section
    inboxData.forEach((category) => {
      category.activities.forEach((activity) => {
        // Route activities to appropriate sections based on type
        switch (activity.type) {
          case 7: // Tutorials
          case 10: // Screen Tips
            appSections.helpSection.push({
              id: activity.activityId,
              name: activity.actName,
              type: "help",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;

          case 11: // Trivia
          case 13: // Mini Games
            appSections.funzone.push({
              id: activity.activityId,
              name: activity.actName,
              type: "entertainment",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;

          case 0: // Survey
          case 1: // Rating
          case 5: // Opinion Poll
            appSections.feedbackCenter.push({
              id: activity.activityId,
              name: activity.actName,
              type: "feedback",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;

          case 9: // Badges
            appSections.achievements.push({
              id: activity.activityId,
              name: activity.actName,
              type: "achievement",
              tags: activity.tags,
              taken: activity.taken === "taken",
            });
            break;
        }
      });
    });

    // Render each section
    renderHelpSection(appSections.helpSection);
    renderFunzone(appSections.funzone);
    renderFeedbackCenter(appSections.feedbackCenter);
    renderAchievements(appSections.achievements);
  });
}

// Render help section with tutorials and tips
function renderHelpSection(helpActivities: SectionActivity[]): void {
  console.log(
    "Building Help Section with",
    helpActivities.length,
    "activities"
  );
  helpActivities.forEach((activity) => {
    console.log(
      "📚 Help:",
      activity.name,
      activity.taken ? "(Completed)" : "(Available)"
    );
  });
  // Implement your help section UI here
}

// Render funzone with games and trivia
function renderFunzone(funActivities: SectionActivity[]): void {
  console.log("Building Funzone with", funActivities.length, "activities");
  funActivities.forEach((activity) => {
    console.log(
      "🎮 Fun:",
      activity.name,
      activity.taken ? "(Played)" : "(New!)"
    );
  });
  // Implement your funzone UI here
}

// Render feedback center with surveys and polls
function renderFeedbackCenter(feedbackActivities: SectionActivity[]): void {
  console.log(
    "Building Feedback Center with",
    feedbackActivities.length,
    "activities"
  );
  feedbackActivities.forEach((activity) => {
    console.log(
      "📝 Feedback:",
      activity.name,
      activity.taken ? "(Submitted)" : "(Pending)"
    );
  });
  // Implement your feedback center UI here
}

// Render achievements section with badges
function renderAchievements(achievementActivities: SectionActivity[]): void {
  console.log(
    "Building Achievements with",
    achievementActivities.length,
    "activities"
  );
  achievementActivities.forEach((activity) => {
    console.log(
      "🏆 Achievement:",
      activity.name,
      activity.taken ? "(Earned)" : "(Available)"
    );
  });
  // Implement your achievements UI here
}

// Show activity when user clicks on it
function showSectionActivity(activityId: string, sectionType: string): void {
  console.log(`Opening ${sectionType} activity:`, activityId);
  Upshot.showActivityWithId(activityId);
}

Section-Specific Activity Display

Create targeted displays for different app areas:

JavaScriptTypeScript

javascript

// Display activities specific to current app section
function displaySectionActivities(sectionName) {
  Upshot.fetchInboxInfo(function (response) {
    const inboxData = JSON.parse(response);
    let sectionActivities = [];

    switch (sectionName) {
      case "help":
        // Show only tutorials and tips in help section
        sectionActivities = filterActivitiesByTypes(inboxData, [7, 10]);
        break;

      case "funzone":
        // Show only games and trivia in funzone
        sectionActivities = filterActivitiesByTypes(inboxData, [11, 13]);
        break;

      case "feedback":
        // Show only surveys and polls in feedback area
        sectionActivities = filterActivitiesByTypes(inboxData, [0, 1, 5]);
        break;

      case "achievements":
        // Show only badges in achievements section
        sectionActivities = filterActivitiesByTypes(inboxData, [9]);
        break;
    }

    // Display section-specific activities
    displayActivitiesForSection(sectionName, sectionActivities);
  });
}

function filterActivitiesByTypes(inboxData, activityTypes) {
  const filtered = [];
  inboxData.forEach((category) => {
    category.activities.forEach((activity) => {
      if (activityTypes.includes(activity.type)) {
        filtered.push(activity);
      }
    });
  });
  return filtered;
}

function displayActivitiesForSection(sectionName, activities) {
  console.log(
    `Displaying ${activities.length} activities for ${sectionName} section:`
  );
  activities.forEach((activity) => {
    console.log(`- ${activity.actName} (${activity.taken})`);
  });
}

// Usage examples:
// displaySectionActivities('help');     // Show tutorials in help section
// displaySectionActivities('funzone');  // Show games in funzone
// displaySectionActivities('feedback'); // Show surveys in feedback area

typescript

type SectionName = "help" | "funzone" | "feedback" | "achievements";

// Display activities specific to current app section
function displaySectionActivities(sectionName: SectionName): void {
  Upshot.fetchInboxInfo((response: string) => {
    const inboxData: InboxCategory[] = JSON.parse(response);
    let sectionActivities: InboxActivity[] = [];

    switch (sectionName) {
      case "help":
        // Show only tutorials and tips in help section
        sectionActivities = filterActivitiesByTypes(inboxData, [7, 10]);
        break;

      case "funzone":
        // Show only games and trivia in funzone
        sectionActivities = filterActivitiesByTypes(inboxData, [11, 13]);
        break;

      case "feedback":
        // Show only surveys and polls in feedback area
        sectionActivities = filterActivitiesByTypes(inboxData, [0, 1, 5]);
        break;

      case "achievements":
        // Show only badges in achievements section
        sectionActivities = filterActivitiesByTypes(inboxData, [9]);
        break;
    }

    // Display section-specific activities
    displayActivitiesForSection(sectionName, sectionActivities);
  });
}

function filterActivitiesByTypes(
  inboxData: InboxCategory[],
  activityTypes: number[]
): InboxActivity[] {
  const filtered: InboxActivity[] = [];
  inboxData.forEach((category) => {
    category.activities.forEach((activity) => {
      if (activityTypes.includes(activity.type)) {
        filtered.push(activity);
      }
    });
  });
  return filtered;
}

function displayActivitiesForSection(
  sectionName: string,
  activities: InboxActivity[]
): void {
  console.log(
    `Displaying ${activities.length} activities for ${sectionName} section:`
  );
  activities.forEach((activity) => {
    console.log(`- ${activity.actName} (${activity.taken})`);
  });
}

// Usage examples:
// displaySectionActivities('help');     // Show tutorials in help section
// displaySectionActivities('funzone');  // Show games in funzone
// displaySectionActivities('feedback'); // Show surveys in feedback area

Visual Inbox ​

Fetching Inbox Details ​

How to Fetch Inbox Details ​

Sample Inbox Response Structure ​

Activity Types Reference ​

Displaying Activities by ID ​

Use Cases for Inbox Details ​

Building App Sections with Inbox Data ​

Section-Specific Activity Display ​

Visual Inbox

Fetching Inbox Details

How to Fetch Inbox Details

Sample Inbox Response Structure

Activity Types Reference

Displaying Activities by ID

Use Cases for Inbox Details

Building App Sections with Inbox Data

Section-Specific Activity Display