This article explains how to develop your own custom BlueConic Mobile Plugin. This walkthrough is meant for Flutter Developers
BlueConic provides a lot of possibilities for integration with your mobile native app:
Listen to behavior and enrich a profile with values.
Retrieve values from a profile, for example to prefill form values.
Create custom interactions for dialogues.
The end result after following this article is that you have created two plugins:
A BlueConic plugin, which is used to configure the interaction in BlueConic.
A Flutter plugin, which is used to render the interaction on the device.
The creation of the Flutter app itself is beyond the scope of this walkthrough. For more information on working with BlueConic from a Flutter app, see the
Creating your BlueConic plugin
Your BlueConic plugin will allow your team to create a dialogue for a mobile channel where they can configure a title and a text message for an Android AlertDialog. This text message will be picked up and displayed by your app.
To create the BlueConic plugin, we will create the following directory structure:
mobilealert/
+-- mobilealert.xml
The directory mobilealert only contains an XML definition file. By itself it is the entire plugin.
XML definition file
The XML definition file lets BlueConic know what the plugin contains. Edit the XML definition file mobilealert.xml as follows:
<?xml version="1.0" encoding="UTF-8"?>
<plugin>
<id>mobilealert-flutter</id>
<version>1.0.0</version>
<type>action</type>
<platformdependency>
<min>37.0</min>
</platformdependency>
<name>
<label locale="en_US">Mobile alert Flutter</label>
<label locale="nl_NL">Mobiele alert Flutter</label>
</name>
<description>
<label locale="en_US">Mobile alert Flutter</label>
<label locale="nl_NL">Mobiele alert Flutter</label>
</description>
<!-- Backend specific properties. -->
<backend>
<parameters>
<parameter>
<id>title</id>
<name>
<label locale="en_US">Title</label>
<label locale="nl_NL">Titel</label>
</name>
<descriptions>
<label locale="en_US">Title of the alert.</label>
<label locale="nl_NL">Titel van de alert.</label>
</descriptions>
<type>string</type>
</parameter>
<parameter>
<id>content</id>
<name>
<label locale="en_US">Content</label>
<label locale="nl_NL">Content</label>
</name>
<descriptions>
<label locale="en_US">Defines the alert content.</label>
<label locale="nl_NL">Content voor de alert</label>
</descriptions>
<type>textarea</type>
</parameter>
</parameters>
</backend>
<!-- Mobile specific properties. -->
<mobile>
<plugins>
<plugin type="android">com.blueconic.BlueConicInteraction</plugin>
<plugin type="iOS">blueconic_flutter.BlueConicInteraction</plugin>
</plugins>
</mobile>
</plugin>
The example above only shows the XML tags relevant for our BlueConic plugin. For the full documentation on all possible tags and their values, see the XML definition file reference. Our XML definition file contains the following instructions:
The <parameter> tags define an edit field for the title and a textarea for the dialog content.
Inside the <mobile> tag we can define a <plugin> tag which contains the fully qualified class name of the bridged class implementation in Android and iOS.
Packaging the plugin
With the XML definition file in place, packaging the mobilealert BlueConic plugin is now only a matter of creating a Zip file with the single file in the top directory. The name of the Zip file itself is not important; the Zip file is only a vessel to get its content to BlueConic.
You should now have a file mobilealert.zip that contains the single file that we created above.
Installing the BlueConic plugin
The packaged plugin can be uploaded to BlueConic:
Log in to BlueConic.
Select Settings > Plugins from the BlueConic navigation bar.
Click Add/Update Plugin.
Select "Upload Zip file".
Select the Zip file.
Click Add Plugin.
Creating your Flutter app plugin
import 'package:blueconic/blueconic_event_bus.dart';
import 'package:blueconic/blueconic_method_names.dart';
import 'package:flutter/material.dart';
import 'package:blueconic/blueconic.dart';
import 'dart:async';
class AlertView extends StatefulWidget {
const AlertView({super.key});
@override
State<AlertView> createState() => _AlertViewState();
}
class _AlertViewState extends State<AlertView> {
String screenName = '';
Map<String, dynamic>? interactionProperties;
StreamSubscription? _onLoadSubscription;
StreamSubscription? _onDestroyedSubscription;
@override
void initState() {
super.initState();
_initializeBlueConic();
}
void _initializeBlueConic() async {
final bus = BlueConicEventBus();
_onLoadSubscription =
bus.on(EventChannelName.onBlueConicPluginLoad).listen((event) {
setState(() {
interactionProperties = Map<String, dynamic>.from(event);
_showModalAlert();
}
});
});
_onDestroyedSubscription =
bus.on(EventChannelName.onBlueConicPluginDestroyed).listen((event) {
setState(() {
interactionProperties = null;
Navigator.of(context, rootNavigator: true).pop(); // dismiss modal
});
});
}
@override
void dispose() {
_onLoadSubscription?.cancel();
_onDestroyedSubscription?.cancel();
super.dispose();
}
String getParameterValue(String id) {
if (interactionProperties == null) return "";
final parameters = interactionProperties?['parameters'];
if (parameters == null || parameters[id] == null) return "";
final values = parameters[id] as List<dynamic>;
return values.isNotEmpty ? values.first.toString() : "";
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Alert')),
body: Padding(
padding: const EdgeInsets.only(top: 48.0, left: 16.0),
child: Column(
children: [
Text(
"Screen name: $screenName",
style: const TextStyle(fontSize: 16),
),
],
),
),
);
}
void _showModalAlert() {
showGeneralDialog(
context: context,
pageBuilder: (context, animation, secondaryAnimation) {
return AlertDialog(
title: Text(getParameterValue("title")),
content: Text(getParameterValue("content")),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Ok'),
),
],
);
},
);
}
}
In your app, include the newly created Flutter Widgets and trigger a PAGEVIEW event to show the newly implemented plugin.
Creating a Dialogue for the Plugin
With our custom BlueConic plugin installed and our custom Flutter plugin integrated into our app, we can now create a Dialogue that makes use of it. Make sure your tenant contains a BlueConic Channel for your mobile app.
Select Dialogues from the BlueConic navigation bar.
Create a new Dialogue by clicking Add Dialogue.
Name the Dialogue "Hello World Android Dialogue".
Select the Who tab.
In the "Properties" widget, select your BlueConic plugin "Mobile dialog".
Select the channel of your mobile app.
Enter some text in the title and content field.
Enable the Dialogue.
Save the Dialogue.
Summary
In this tutorial, you learned how to create a custom "AlertPlugin" plugin for Flutter, how to install it in BlueConic, and how to use it in a Dialogue so you can view it on a mobile.