This article explains how to develop your own custom BlueConic Mobile Plugin. This walkthrough is meant for React Native 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 React Native plugin, which is used to render the interaction on the device.
The creation of the React Native app itself is beyond the scope of this walkthrough. For more information on working with BlueConic from a React Native app, see the BlueConic SDK for React Native.
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-react</id>
<version>1.0.0</version>
<type>action</type>
<platformdependency>
<min>37.0</min>
</platformdependency>
<name>
<label locale="en_US">Mobile alert React Native</label>
<label locale="nl_NL">Mobiele alert React Native</label>
</name>
<description>
<label locale="en_US">Mobile alert React Native</label>
<label locale="nl_NL">Mobiele alert React Native</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.reactnative.BlueConicInteraction</plugin>
<plugin type="iOS">BlueConicReactNative.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 React Native app plugin
Your React Native plugin will be interacting with your mobile app. The SDK provides a native plugin class implementation, BlueConicInteraction that can retrieve the information from the native Android and iOS layers.
Implement your React Native plugin
You will need to create a React Component that will be used to receive the data from the Android and iOS native layers. As an example create a file named AlertPlugin.tsx in your project.
Copy the following content to the file:
import React from 'react';
import { NativeEventEmitter, NativeModules, View, Text, TouchableOpacity } from 'react-native';
import Modal from 'react-native-modal';
const { BlueConicClient } = NativeModules;
/**
* Interface used to define the values received from the BlueConicClient native module
*/
interface InteractionProperties {
id: string;
name: string;
type: string;
pluginType: string;
dialogueId: string;
dialogueName: string;
positionId: string;
positionName: string;
parameters: any;
}
export class AlertPlugin extends React.Component {
onBlueConicPluginLoad: any;
onBlueConicPluginDestroyed: any;
eventEmitter: any;
interactionProperties: InteractionProperties;
state = {
isVisible: false
};
constructor(props: object) {
super(props);
this.eventEmitter = new NativeEventEmitter(BlueConicClient);
if (this.eventEmitter) {
this.onBlueConicPluginLoad = this.eventEmitter.addListener(
"onBlueConicPluginLoad", (_interactionProperties: InteractionProperties) => {
this.setState({ isVisible: true });
this.interactionProperties = _interactionProperties;
}
);
this.onBlueConicPluginDestroyed = this.eventEmitter.addListener(
"onBlueConicPluginDestroyed", (_interactionProperties: InteractionProperties) => {
this.setState({ isVisible: false });
}
);
}
}
componentWillUnmount() {
this.onBlueConicPluginLoad.remove();
this.onBlueConicPluginDestroyed.remove();
this.eventEmitter.removeAllListeners("onBlueConicPluginLoad");
}
getParameterValue(id: string) {
const parameters = this.interactionProperties.parameters;
const values = parameters[id]
if (!values.isNullOrEmpty()) {
return values[0];
} else id
}
render() {
return (
<Modal isVisible={this.state.isVisible}>
<View>
<Text>{this.getParameterValue("title")}</Text>
<Text>{this.getParameterValue("content")}</Text>
<TouchableOpacity onPress={() => {this.setState({ isVisible: false })}} >
<Text>Ok</Text>
</TouchableOpacity>
</View>
</Modal>
);
}
}
In your app, include the newly created React Native Component 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 React Native 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 React Native, how to install it in BlueConic, and how to use it in a Dialogue so you can view it on a mobile.