A component of React for use the Freshdesk Widget
npm install @personare/react-freshdesk-widget --save
import FreshdeskWidget from '@personare/react-freshdesk-widget';
...
render() {
return (
<FreshdeskWidget url="https://support.freshdesk.com" />
);
}
...
import FreshdeskWidget from '@personare/react-freshdesk-widget';
...
render() {
return (
<FreshdeskWidget url="https://support.freshdesk.com" type="pop-up">
<button>Send Feedback</button>
</FreshdeskWidget>
);
}
...
url
- requiredtype
- one of ['pop-up', 'incorporated']formTitle
- default: Help and supportformHeight
- default: 500pxsubmitThanks
- 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'
An URL of the service of your Freshdesk
For example:
...
render() {
return (
<FreshdeskWidget url="https://support.freshdesk.com" />
);
}
...
The type of widget you want to insert the page.
Currently you can perform through two ways:
- Through a pop-up where the user must click to display the widget.
- Incorporating direct in your HTML.
default: incorporated
For example:
...
render() {
return (
<FreshdeskWidget
url="https://support.freshdesk.com"
type="pop-up"
/>
);
}
...
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"
/>
);
}
...
The height of the form.
default: 500px
For example:
...
render() {
return (
<FreshdeskWidget
url="https://support.freshdesk.com"
formHeight="700px"
/>
);
}
...
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!!!"
/>
);
}
...
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"
/>
);
}
...
The text of button.
default: Support
For example:
...
render() {
return (
<FreshdeskWidget
url="https://support.freshdesk.com"
type="pop-up"
buttonType="text"
buttonText="Send feedback!"
/>
);
}
...
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"
/>
);
}
...
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"
/>
);
}
...
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"
/>
);
}
...
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"
/>
);
}
...
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"
/>
);
}
...
To start developing in the project run:
npm run serve
Then ready at http://localhost:9001
.
Just run:
npm run tests
This scaffolding will be generated by @Personare/react-component-generator