Help
Print
Advanced widget customization with code
From the widget settings menu you can configure the appearance and the different options that will be displayed in the widget.
There you can choose if the widget will be visible, the position, the colors, if you want the chat to appear or not, the help articles, the product updates, a form instead of the chat, etc.
But.. what if you need to have different options on your public website and on your private app where only logged in users have access? Or, what if depending on the type of user, for example paid user or free user, I need to configure the widget differently?
FROGED has a great advantage with this, and that is that you can customize and override the widget configuration from the installation code.
Here we will show some examples:
1- Basic code:
The code that can be copied from the installation menu includes a line with the identifier of your workspace
<script>
window.frogedSettings = {
appId: "YOUR_WORKSPACE_ID"
}
</script>This is the basic way of installation, the normal one for almost all users, and the widget options are configured from the menu as we have seen above.
For our example this is the result with the basic code:
2- Change appearance:
The first thing we are going to change are the colors:
<script>
window.frogedSettings = {
appId: "YOUR_WORKSPACE_ID",
settings: {
colorMain: '#3368FF',
colorAccent: '#FFA533'
}
}
</script>3- Choose features included in widget
With these options you can choose whether or not the widget will have live chat, help articles or product updates available.
<script>
window.frogedSettings = {
appId: "YOUR_WORKSPACE_ID",
settings: {
colorMain: '#3368FF',
colorAccent: '#FFA533',
moduleDocumentsDisabled: true,
moduleUpdatesDisabled: true
}
}
</script>As seen in the image we have deactivated the help articles and product updates features, and only the chat appears.
4- Activate form
We add one more option in the code to activate the contact form instead of the live chat.
<script>
window.frogedSettings = {
appId: "YOUR_WORKSPACE_ID",
settings: {
colorMain: '#3368FF',
colorAccent: '#FFA533',
moduleDocumentsDisabled: true,
moduleUpdatesDisabled: true,
qualificationFormActive:true
}
}
</script>As we have seen in the example it is very easy to configure the widget by modifying the installation code. With this it is possible to show different appearances and configurations in different environments such as the website or the web app, and even different widgets depending on the type of user if you choose to use one code or another depending on the type.
In the SDK Javascript you can find all the options available to configure the widget.