Skip to content

Commit

Permalink
chore: Add options to customize the design of the widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@pranavrajs
pranavrajs committed Sep 8, 2021
1 parent 6f8ce6a commit 3c9f63e
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 158 deletions.
42 changes: 18 additions & 24 deletions README.md
View file
@@ -1,19 +1,14 @@
# Chatwoot Plugin #
**Contributors:** antpb
**Tags:** comments, spam
**Requires at least:** 4.5
**Tested up to:** 5.5.3
**Requires PHP:** 5.6
**Stable tag:** 0.1.0
**License:** GPLv2 or later
**License URI:** https://www.gnu.org/licenses/gpl-2.0.html

This plugin allows you to embed a Chatwoot widget on every front end page of your WordPress.

## Description ##

A few notes about the sections above:
**Contributors:** antpb
**Tags:** comments, live-chat
**Requires at least:** 4.5
**Tested up to:** 5.8
**Requires PHP:** 5.6
**Stable tag:** 0.2.0
**License:** GPLv2 or later
**License URI:** https://www.gnu.org/licenses/gpl-2.0.html

This plugin allows you to add a Chatwoot live-chat widget on every page of your WordPress website. This plugin also allows you customize the widget by providing options to select locale, position, design type etc.

## Installation ##

Expand All @@ -22,17 +17,16 @@ This section describes how to install the plugin and get it working.
e.g.

1. Download Release Zip and use the WordPress plugin upload options.
1. Activate the plugin through the 'Plugins' menu in WordPress
1. Go to Settings > Chatwoot Settings

## Frequently Asked Questions ##

### A question that someone might have ###

An answer to that question.
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Go to Settings > Chatwoot Settings

## Changelog ##

### 0.2.0 ###
- Add options for customizing the plugin
- Allow admin to select the locale from the settings panel.
- Update the admin settings styles.

### 0.1.0 ###
Initializes Plugin
Simple Embed based on Options saved
- Initialize Plugin
- Simple Embed based on Options saved
33 changes: 31 additions & 2 deletions admin.css
View file
@@ -1,3 +1,32 @@
#chatwootSiteURL, #chatwootSiteToken {
min-width: 400px;
.form--input label {
font-weight: 600;
margin-bottom: 4px;
display: block;
}

.form--input input {
margin-bottom: 16px;
min-width: 400px;
}

.form--input select {
margin-bottom: 16px;
min-width: 400px;
}

.chatwoot--form {
background: #fff;
border-radius: 8px;
padding: 32px;
margin-right: 16px;
}

.chatwoot--form .submit {
margin: 0;
padding: 0;
}

.chatwoot--form hr {
margin-bottom: 24px;
margin-top: 16px;
}
139 changes: 111 additions & 28 deletions chatwoot-plugin.php
View file
Expand Up @@ -2,12 +2,11 @@
/**
* Plugin Name: Chatwoot Plugin
* Plugin URI: https://www.chatwoot.com/
* Description: Chatwoot Plugin for WordPress
* Description: Chatwoot Plugin for WordPress. This plugin helps you to quickly integrate Chatwoot live-chat widget on Wordpress websites.
* Author: antpb
* Author URI: antpb.com
* Author URI: chatwoot.com
* Text Domain: chatwoot-plugin
* Domain Path: /languages
* Version: 0.1.0
* Version: 0.2.0
*
* @package chatwoot-plugin
*/
Expand Down Expand Up @@ -49,10 +48,18 @@ function chatwoot_load() {
// Get our site options for site url and token.
$chatwoot_url = get_option('chatwootSiteURL');
$chatwoot_token = get_option('chatwootSiteToken');
$chatwoot_widget_locale = get_option('chatwootWidgetLocale');
$chatwoot_widget_type = get_option('chatwootWidgetType');
$chatwoot_widget_position = get_option('chatwootWidgetPosition');
$chatwoot_launcher_text = get_option('chatwootLauncherText');

// Localize our variables for the Javascript embed code.
wp_localize_script( 'chatwoot-client', 'chatwoot_token', $chatwoot_token );
wp_localize_script( 'chatwoot-client', 'chatwoot_url', $chatwoot_url );
wp_localize_script('chatwoot-client', 'chatwoot_token', $chatwoot_token);
wp_localize_script('chatwoot-client', 'chatwoot_url', $chatwoot_url);
wp_localize_script('chatwoot-client', 'chatwoot_widget_locale', $chatwoot_widget_locale);
wp_localize_script('chatwoot-client', 'chatwoot_widget_type', $chatwoot_widget_type);
wp_localize_script('chatwoot-client', 'chatwoot_launcher_text', $chatwoot_launcher_text);
wp_localize_script('chatwoot-client', 'chatwoot_widget_position', $chatwoot_widget_position);
}

add_action('admin_menu', 'chatwoot_setup_menu');
Expand All @@ -76,10 +83,19 @@ function chatwoot_setup_menu(){
* @return {void}.
*/
function chatwoot_register_settings() {
add_option( 'chatwootSiteToken', '');
add_option( 'chatwootSiteURL', '');
register_setting( 'chatwoot-plugin-options', 'chatwootSiteToken', 'myplugin_callback' );
register_setting( 'chatwoot-plugin-options', 'chatwootSiteURL', 'myplugin_callback' );
add_option('chatwootSiteToken', '');
add_option('chatwootSiteURL', '');
add_option('chatwootWidgetLocale', 'en');
add_option('chatwootWidgetType', 'standard');
add_option('chatwootWidgetPosition', 'right');
add_option('chatwootLauncherText', '');

register_setting('chatwoot-plugin-options', 'chatwootSiteToken' );
register_setting('chatwoot-plugin-options', 'chatwootSiteURL');
register_setting('chatwoot-plugin-options', 'chatwootWidgetLocale' );
register_setting('chatwoot-plugin-options', 'chatwootWidgetType' );
register_setting('chatwoot-plugin-options', 'chatwootWidgetPosition' );
register_setting('chatwoot-plugin-options', 'chatwootLauncherText' );
}

/**
Expand All @@ -92,24 +108,91 @@ function chatwoot_register_settings() {
function chatwoot_options_page() {
?>
<div>
<?php screen_icon(); ?>
<h2>Chatwoot Settings</h2>
<form method="post" action="options.php">
<?php settings_fields( 'chatwoot-plugin-options' ); ?>
<table>
<tr valign="top">
<th scope="row"><label for="chatwootSiteToken">Site Token</label></th>
<td><input type="text" id="chatwootSiteToken" name="chatwootSiteToken" value="<?php echo get_option('chatwootSiteToken'); ?>" /></td>
</tr>
</table>
<table>
<tr valign="top">
<th scope="row"><label for="chatwootSiteToken">Chatwoot URL</label></th>
<td><input type="text" id="chatwootSiteURL" name="chatwootSiteURL" value="<?php echo get_option('chatwootSiteURL'); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
<?php screen_icon(); ?>
<h2>Chatwoot Settings</h2>
<form method="post" action="options.php" class="chatwoot--form">
<?php settings_fields('chatwoot-plugin-options'); ?>
<div class="form--input">
<label for="chatwootSiteToken">Chatwoot Website Token</label>
<input
type="text"
name="chatwootSiteToken"
value="<?php echo get_option('chatwootSiteToken'); ?>"
/>
</div>
<div class="form--input">
<label for="chatwootSiteURL">Chatwoot Installation URL</label>
<input
type="text"
name="chatwootSiteURL"
value="<?php echo get_option('chatwootSiteURL'); ?>"
/>
</div>
<hr />

<div class="form--input">
<label for="chatwootWidgetType">Widget Design</label>
<select name="chatwootWidgetType">
<option value="standard" <?php selected(get_option('chatwootWidgetType'), 'standard'); ?>>Standard</option>
<option value="expanded_bubble" <?php selected(get_option('chatwootWidgetType'), 'expanded_bubble'); ?>>Expanded Bubble</option>
</select>
</div>
<div class="form--input">
<label for="chatwootWidgetPosition">Widget Position</label>
<select name="chatwootWidgetPosition">
<option value="left" <?php selected(get_option('chatwootWidgetPosition'), 'left'); ?>>Left</option>
<option value="right" <?php selected(get_option('chatwootWidgetPosition'), 'right'); ?>>Right</option>
</select>
</div>
<div class="form--input">
<label for="chatwootWidgetLocale">Language</label>
<select name="chatwootWidgetLocale">
<option <?php selected(get_option('chatwootWidgetLocale'), 'ar'); ?> value="ar">العربية (ar)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ca'); ?> value="ca">Català (ca)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'cs'); ?> value="cs">čeština (cs)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'da'); ?> value="da">dansk (da)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'de'); ?> value="de">Deutsch (de)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'el'); ?> value="el">ελληνικά (el)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'en'); ?> value="en">English (en)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'es'); ?> value="es">Español (es)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'fa'); ?> value="fa">فارسی (fa)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'fi'); ?> value="fi">suomi, suomen kieli (fi)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'fr'); ?> value="fr">Français (fr)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'hi'); ?> value="hi'">हिन्दी (hi)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'hu'); ?> value="hu">magyar nyelv (hu)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'id'); ?> value="id">Bahasa Indonesia (id)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'it'); ?> value="it">Italiano (it)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ja'); ?> value="ja">日本語 (ja)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ko'); ?> value="ko">한국어 (ko)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ml'); ?> value="ml">മലയാളം (ml)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'nl'); ?> value="nl">Nederlands (nl) </option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'no'); ?> value="no">norsk (no)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'pl'); ?> value="pl">język polski (pl)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'pt_BR'); ?> value="pt_BR">Português Brasileiro (pt-BR)
<option <?php selected(get_option('chatwootWidgetLocale'), 'pt'); ?> value="pt">Português (pt)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ro'); ?> value="ro">Română (ro)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ru'); ?> value="ru">русский (ru)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'sv'); ?> value="sv">Svenska (sv)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'ta'); ?> value="ta">தமிழ் (ta)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'tr'); ?> value="tr">Türkçe (tr)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'vi'); ?> value="vi">Tiếng Việt (vi)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'zh_CN'); ?> value="zh_CN">中文 (zh-CN)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'zh_TW'); ?> value="zh_TW">中文 (台湾) (zh-TW)</option>
<option <?php selected(get_option('chatwootWidgetLocale'), 'zh'); ?> value="zh'">中文 (zh)</option>
</select>
</div>
<?php if (get_option('chatwootWidgetType') == 'expanded_bubble') : ?>
<div class="form--input">
<label for="chatwootLauncherText">Launcher Text (Optional)</label>
<input
type="text"
name="chatwootLauncherText"
value="<?php echo get_option('chatwootLauncherText'); ?>"
/>
</div>
<?php endif; ?>
<?php submit_button(); ?>
</form>
</div>
<?php
}
27 changes: 16 additions & 11 deletions js/chatwoot.js
View file
@@ -1,12 +1,17 @@
window.chatwootSettings = {
locale: chatwoot_widget_locale,
type: chatwoot_widget_type,
position: chatwoot_widget_position,
launcherTitle: chatwoot_launcher_text,
};

(function(d,t) {
var BASE_URL= chatwoot_url;
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.chatwootSDK.run({
websiteToken: chatwoot_token,
baseUrl: BASE_URL
})
}
})(document,"script");
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.async=!0;
g.defer=!0;
g.src=chatwoot_url+"/packs/js/sdk.js";
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.chatwootSDK.run({ websiteToken: chatwoot_token, baseUrl: chatwoot_url })
}
})(document,"script");
46 changes: 0 additions & 46 deletions languages/chatwoot-personalize-integration.pot
View file

This file was deleted.

47 changes: 0 additions & 47 deletions readme.txt
View file

This file was deleted.

0 comments on commit 3c9f63e

Please sign in to comment.