react-freshdesk-widget

A component of React for use the Freshdesk Widget

Demo

Check it live :)

Installation

yarn add @personare/react-freshdesk-widget

Basic Usage

import FreshdeskWidget from '@personare/react-freshdesk-widget';

...
render() {
    return (
        <FreshdeskWidget url="https://support.freshdesk.com" />
    );
}
...

With custom button

import FreshdeskWidget from '@personare/react-freshdesk-widget';

...
render() {
    return (
        <FreshdeskWidget url="https://support.freshdesk.com" type="pop-up">
            <button>Send Feedback</button>
        </FreshdeskWidget>
    );
}
...

Props

• url - required
• type - one of ['pop-up', 'incorporated']
• formTitle - default: Help and support
• formHeight - default: 500px
• submitThanks - default: Thank you, one of our representatives will respond to you soon! =)
• buttonType - only if the type property are equal 'pop-up'
• buttonText - only if the type property are equal 'pop-up'
• buttonColor - only if the type property are equal 'pop-up'
• buttonOffset - only if the type property are equal 'pop-up'
• buttonPosition - only if the type property are equal 'pop-up'
• buttonBackgroundColor - only if the type property are equal 'pop-up'
• buttonBackgroundImage - only if the type property are equal 'pop-up'
• autofill - allows autofilling fields

url (required)

An URL of the service of your Freshdesk

For example:

...
render() {
    return (
        <FreshdeskWidget url="https://support.freshdesk.com" />
    );
}
...

type - one of ['pop-up', 'incorporated']

The type of widget you want to insert the page.

Currently you can perform through two ways:

1. Through a pop-up where the user must click to display the widget.
2. Incorporating direct in your HTML.

default: incorporated

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
        />
    );
}
...

formTitle (optional)

What will be the title of the form.

default: Help and support

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            formTitle="This is a custom title"
        />
    );
}
...

formHeight

The height of the form.

default: 500px

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            formHeight="700px"
        />
    );
}
...

submitThanks

The message that appears after the user send feedback.

default: Thank you, one of our representatives will respond to you soon! =)

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            submitThanks="Thank you!!!"
        />
    );
}
...

buttonType - one of ['text', 'image']

The type of button when use pop-up.

default: text

Note: When do you use an image type is necessary to pass buttonBackgroundImage property.

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="image"
            buttonBackgroundImage="my-custom-button.png"
        />
    );
}
...

buttonText - (optional)

The text of button.

default: Support

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="text"
            buttonText="Send feedback!"
        />
    );
}
...

buttonColor - (optional)

The font color of button text.

default: white

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="text"
            buttonText="Send feedback!"
            buttonColor="yellow"
        />
    );
}
...

buttonBackgroundColor - (optional)

The background-color of button.

default: #015453

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="text"
            buttonText="Send feedback!"
            buttonColor="yellow"
            buttonBackgroundColor="#012471"
        />
    );
}
...

buttonPosition - one of ['left', 'right', 'top', 'bottom']

The position of button in the window.

default: top

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="text"
            buttonText="Send feedback!"
            buttonColor="yellow"
            buttonBackgroundColor="#012471"
            buttonPosition="bottom"
        />
    );
}
...

buttonOffset - (optional)

The offset of button.

default: 235px

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="text"
            buttonText="Send feedback!"
            buttonColor="yellow"
            buttonBackgroundColor="#012471"
            buttonPosition="bottom"
            buttonOffset="150px"
        />
    );
}
...

buttonBackgroundImage - (optional)

When you use the buttonType with image, need to specify the URL and this property is for this.

default: 235px

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            buttonType="image"
            buttonBackgroundImage="http://localhost/my-custom-image.png"
            buttonPosition="bottom"
            buttonOffset="150px"
        />
    );
}
...

autofill - (optional)

If you want to fill any of the fields in with data from your application you can do that here. This doesn't work for custom fields.

For example:

...
render() {
    return (
        <FreshdeskWidget 
            url="https://support.freshdesk.com"
            type="pop-up"
            autofill={{ requester: user.email }}
        />
    );
}
...

Development

To start developing in the project run:

yarn serve

Then ready at http://localhost:9001.

Tests

Just run:

yarn test

This scaffolding will be generated by @Personare/react-component-generator