Dashboard

InstaDiv

Introduction

InstaDiv is a low-code solution that offers server-driven in-app engagement and promotional components specifically designed for mobile applications. It allows changes to go live instantly, facilitating faster iteration & reach.

Problem statement

The best time to engage with your users is when they are actually using your app. For that, the UI touch points need to be highly iterative, dynamic and current as per user behaviour. But in order to achieve this you might need to update the app through app store releases, which might work well for adding new features and improvements. However, small updates such as UI and copy changes can present some unique challenges:

• These changes often involve growth and marketing-focused sections like event triggered dialogs & bottom sheet, story view, banners & carousels, which are extremely crucial for user engagement. It would be more efficient if these updates could be pushed over-the-air, reaching the user's device more quickly.
• The dev team can get sidetracked catering to these updates and may need to adjust their release cycle. However, this problem can be solved by using a good CMS-like platform, which can be updated by the product, growth, or marketing team.

Solution

The solution involves creating a no-code platform that fills a market void, enabling users to construct user engagement components like event triggered dialogs & bottom sheet, story view, banners & carousels with a server-driven approach that can be modified over-the-air without app store releases. The issue is that configuring and executing UI and A/B tests can be challenging and time-intensive, posing difficulties for smaller enterprises.

The solution entails a no-code SaaS platform that provides pre-built server-driven UI components, making it simple for Product owners and leaders to set up and conduct tests without any coding skills. This has the potential to improve efficiency and save resources for companies, optimising their products and marketing strategies.

How its works?

Setup & Dashboard

To ensure a consistent developer experience for all API users, the Notion API is rate limited and basic size limits apply to request parameters.

1. Create an account or sign-in @ InstaDiv dashboard
   1. This step will create your account and also create an InstaDiv API key.
   2. Create a project and connect with your firebase project by adding firebase services JSON so that all your views gets stored on your firebase firestore db.
2. Create a view(event triggered dialogs, banners, carousels or storyview)
   1. Once you are signed in you will be navigated to the dashboard, there you can create a new view by clicking on the + tile
3. Select attributes as per your requirements
   1. In view creation and modification mode you can select attributes like dimensions, images, deeplinks etc. Additionally, you can see in real time how this view is going to appear.
4. Deploy the view
   1. Once view attributes are set, you can deploy the view to the server by clicking on the deploy CTA. Once deployed, copy the viewed id as this will be with client side SDK integration

Flutter integration

<aside> ❗ You need an integration token to interact with InstaDiv platform. You can find an integration token on the dashboard after you create your teams account.

</aside>

Run this flutter pub command:

$ flutter pub add instadiv

Import it in your main.dart

import 'package:instadiv/instadiv.dart';

Init the plugin

final instadivPlugin = Instadiv.getInstance();

Set the Firebase app so that views created from InstaDiv dashboard can be securely fetched

instadivPlugin.setFirebase(Firebase.app());

Set the API key and Project id corresponding to this app. Both can be found on InstaDiv dashboard.

instadivPlugin.setCred(apiKey, projectId);

Following that you can simply pass your HomeScreen widget to the InstaScreenWidget Please note that this is step is required to display all the Instadiv in-app and embedded views.

@override
Widget build(BuildContext context) {

  if (!_initialized) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Container(
      color: Colors.white,
      child: const Center(
        child: CircularProgressIndicator.adaptive(),
      ),
    )));
  }
  return const InstaScreenWidget(appWidget: HomePage());
}

Triggering in app engagement dialog or bottom sheet post an event

Instadiv.getInstance().logEvent(context, 'event_name', 'logged_in')

Setting custom click listeners for event triggered dialogs and story view CTAs

//Following should be done only after MaterialApp is created, for example- inside build() method of your HomePage
 
final instadivPlugin = Instadiv.getInstance();

// Set onPress for 'OK' action of inapp dialog
// If not set it will open the link
instadivPlugin.setInAppCTA((url) {
  print(url);
Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => const SecondScreen()));
});

// Set onPress for 'Story view CTA
// If not set it will open the link
instadivPlugin.setStoryViewCTA((url) {
  print(url);
  Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => const SecondScreen()));
});

Embed views like banners and carousels

return Column(children: [
  const SizedBox(height: 16),
  InstaView(
      viewId: 'copy viewId from instadiv dashboard',
      onPress: (uri) => Instadiv.getInstance()
          .logEvent(context, 'event_name', 'banner_clicked')),
  const InstaView(
      viewId: 'copy viewId from instadiv dashboard'),
]);

The following screen has been created completely using InstaDiv components -

Android integration

Coming soon…

iOS integration

Coming soon…

React native integration

Coming soon…