Customization

DEPRECATION NOTICE

Our Cordova plugin for integrating our SDK is now deprecated. We highly recommend transitioning to our SDK using Swift Package Manager (SPM) for iOS and Gradle for Android. Please implement a custom wrapper to interface directly with the SDK methods.

For Ionic users, you can transition to using Capacitor, which supports working with native libraries seamlessly. This change will ensure better performance and more direct access to the latest SDK features.

Styles#

MeetingLawyers UI styles can be customized by creating an instance that complies with the MediQuoStyleType protocol, modifying its properties and then linking it to the style property of the library.

By default, the style property is already configured with initial values that fit with the MeetingLawyers brand and are used if the style value is not overwritten or simply initialized to nil.

Properties#

// Color used to: Toolbar background color in chat and professional profile screens
var primaryColor = '#2ECD71';

// OPTIONAL Color used to: Professional speciality label color by default on professional list view. Unread messages badge color by default on professional list view. Professional description background color by default on profile screen
var secondaryColor = '#27ae60';

// OPTIONAL Color used to: Navigation bar color
var navigationColor = '#27ae60';

// OPTIONAL Color used to: Professional speciality label color
var specialityColor = '#27ae60';

index.js

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // Cordova is now initialized. Have fun!

    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');

    meetinglawyers.initialize(
    {{API_KEY}}}, // Ex: '123456'
    {{ENVIRONMENT}}, // Ex: 'DEVELOPMENT' | 'PRODUCTION'
    function() {
        // INIT OK: Start customization
        meetinglawyers.setStyle({   primaryColor : "#2ECD71",
                                    secondaryColor : "#27ae60",
                                    specialityColor: "#00FF00",
                                    navigationColor: "#0000FF"},
                                function() {}, function(err) {});
    },
    function(err) {
        // INIT ERROR:
    }
    );
}

Navigation Image#

Add custom image to the top of the professional list.

Set the navigation image name in the meetinglawyers sdk before displaying the list of professionals:

index.js

meetinglawyers.setNavigationImage("logo_ml", function() {}, function(err) {});

To include the image in the platform project, follow these steps:

Android#

Add the custom image (PNG/JPEG format) in the www directory of your project.

Then copy the image to the Android project using config.xml:

config.xml

<platform name="android">
    <resource-file src="www/img/logo_ml.png" target="app/src/main/res/drawable/logo_ml.png" />
</platform>

iOS#

Open project with Xcode and add image inside Resources/Images xcasset:

Add Image

Next steps#

Configure PUSH notifications: Firebase