Signum

Demo

You can try the communication tool here: https://nightborn-be.github.io/signum Or on our website for a production-version: https://nightborn.be

Install

npm install --save signum
yarn add signum

Configuration

Theme

For the configuration of the UI we created a little interface to generate a config.js file to customize the theme. https://nightborn.be/lab/signum

Options

For the options it's a pretty straightforward structure.

1. First create the container object:

option: {
	title: 'Hello there !',
	subTitle: 'How can I help you?',
	message: 'How can I help you?',
	name: 'Hello there'
}

2. Add the array of options (If you want options)

option: {
	title: 'Hello there !',
	subTitle: 'How can I help you?',
	message: 'How can I help you?',
	name: 'Hello there',
	options: [
		{
            title: 'Hello there !',
            message: 'You chose option A?',
            name: 'Option A',
            options: [
                {
                    title: 'Hello there !',
                    message: 'You chose option AA?',
                    name: 'Option AA',
                },
                {
                    title: 'Hello there !',
                    message: 'You chose option AB?',
                    name: 'Option AB',
                }
            ]
        },
        {
            title: 'Hello there !',
            message: 'You chose option B?',
            name: 'Option B',
        }
	]
}

Important information

1. In order for the back-button to appear, you should leave blanc the subTitle attribute of the object.
2. If you're at a leaf of your option-tree, please leave empty the options attribute and the messaging body of Signum will appear.

Usage

import React from 'react'
import Chat from 'signum'
import 'signum/dist/index.css';

const defaultProps = {
	option: {
		title: 'Hello there !',
		subTitle: 'How can I help you?',
		message: 'How can I help you?',
		name: 'Hello there',
		options: [
			{
				title: 'Hello there !',
				message: 'You chose option A?',
				name: 'Option A',
				options: [
					{
						title: 'Hello there !',
						message: 'You chose option AA?',
						name: 'Option AA',
					},
					{
						title: 'Hello there !',
						message: 'You chose option AB?',
						name: 'Option AB',
					}
				]
			},
			{
				title: 'Hello there !',
				message: 'You chose option B?',
				name: 'Option B',
			}
		]
	},
	config: {
		openByDefault: false,
		avatarIcon: require('./assets/chat_avatar.png'),
		mainColor: 'linear-gradient(90deg, #406321 0%, #283E15 100%)',
		secondaryColor: 'linear-gradient(90deg, #406321 0%, #283E15 100%)',
		sendButtonColor: '#0074CE',
		finalButtonColor: "linear-gradient(90deg, #406321 0%, #283E15 100%)",
		emailPlaceholder: 'Please fill in your e-mail',
		messagePlaceholder: 'Please provide us some information',
		finalTitle: 'Thank you.',
		finalSubTitle: "We'll be in touch!",
		finalButtonText: "Continue",
		handleFinalButtonClicked: () => { },
		handleSendClicked: (information) => console.log(information),
	}
}

const App = () => {
	return (
		<Chat {...defaultProps} />
	)
}

export default App;

License

MIT © m-Nightly