chatwoot问题

1.客户端定义powered

image.png
客户端代码:
app/javascript/widget/i18n - The strings related to the web widget
image.png

文件所在地址:installation_config.yml

- name: BRAND_NAME

修改上面的即可。

前端页面展示的app如下:
image.png

对应的视图为:
image.png

其中:点击的超链接在:
app/javascript/shared/components/Branding.vue
下的:

 computed: {
    brandRedirectURL() {
      try {
        const referrerHost = this.$store.getters['appConfig/getReferrerHost'];
        const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=${
          referrerHost ? 'widget_branding' : 'survey_branding'
        }`;
        if (referrerHost) {
          return `${baseURL}&utm_referrer=${referrerHost}`;
        }
        return baseURL;
      } catch (e) {
        // Suppressing the error as getter is not defined in some cases
      }
      return '';
    },
  },

其是从:app/controllers/widgets_controller.rb中获取:

 def set_global_config
    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
  end

2.开启用户注册功能

.env环境:
By default, Chatwoot will not allow users to create an account[multi-tenancy] from the login page. However, if you are setting up a public server, you can enable signup using:

ENABLE_ACCOUNT_SIGNUP=true

3.自定义语种

.env
DEFAULT_LOCALE=zh_CN

如果我们修改了语种对应的内容,需要使用webpacker自动编译。

rake assets:precompile RAILS_ENV=production

4.客户端跳转地址

image.png

5.SDK的设置

image.png
chatwoot/app/javascript/packs/sdk.js

6.全屏展示

在生成的sdk下面的.onload方法里面添加

 window.$chatwoot.popoutChatWindow();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线沟通</title>
</head>
<body>
    <script>
     function getUrlParam(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return decodeURI(r[2]);
      return null;
    }

    const name = getUrlParam('name');
    const userid = getUrlParam('userid');
    const email = getUrlParam('email');

        (function(d,t) {
        var BASE_URL="http://47.93.120.246:14904";
        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=BASE_URL+"/packs/js/sdk.js";
        g.defer = true;
        g.async = true;
        s.parentNode.insertBefore(g,s);
        g.onload=function(){
        window.chatwootSDK.run({
        websiteToken: 'xxxxx',
        baseUrl: BASE_URL
    })
     window.$chatwoot.popoutChatWindow();

     window.$chatwoot.setUser(userid, {
           email: email,
           name: name
        });
    }
    })(document,"script");
</script>
</body>
</html>

7.生产数据库存重置

一旦我们修改了:installation_config.yml配置的时候,他会在数据库installation_configs保存数据,所以我们需要重制数据库:生产环境下:

RAILS_ENV=production bundle exec rake db:create
RAILS_ENV=production bundle exec rake db:reset

image.png
一些参数配置实在数据库中:installation_config
所以需要重置数据库清除数据

 RAILS_ENV=production bundle exec rake db:reset DISABLE_DATABASE_ENVIRONMENT_CHECK=1

然后重启:

修改参数:

#release: bundle exec rails db:chatwoot_prepare
web: bin/rails server -p 14904 -e production
worker: bundle exec sidekiq -C config/sidekiq.yml
foreman start -f Procfile

初始化数据库之后需要重新企业注册。

8.h5自动弹框

chatwoot/app/javascript/packs/sdk.js

 showPopoutButton: chatwootSettings.showPopoutButton || true,

image.png

onBubbleClick({ toggleValue: true });

修改chatwoot/app/javascript/sdk/sdk.js的样式为:

.woot-widget-bubble {
  background: #1f93ff;
  border-radius: 100px;
  border-width: 0px;
  bottom: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
  cursor: pointer;
  height: 1px;
  padding: 0px;
  position: fixed;
  user-select: none;
  width: 1px;
  z-index: 2147483000 !important;
}

@media only screen and (min-width: 667px) {
  .woot-widget-holder.woot-elements--left {
    left: 20px;
 }
  .woot-widget-holder.woot-elements--right {
    right: 0px;
 }
}

@media only screen and (min-width: 667px) {
  .woot-widget-holder {
    border-radius: 16px;
    bottom: 104px;
    height: calc(100% - 0px - 0px);
    width: 100%;
 }
}

8.去除右上角的x关闭按钮

/chatwoot/app/javascript/widget/components/HeaderActions.vue中删除:

<!--<button
      class="button transparent compact close-button"
      :class="{
        'rn-close-button': isRNWebView,
      }"
      @click="closeWindow"
    >
      <fluent-icon
        icon="dismiss"
        size="24"
        :class="$dm('text-black-900', 'dark:text-slate-50')"
      />
    </button>-->

9.手机端自适应

在主页面上添加:
参考:https://www.moewah.com/archiv...

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

10.自定义log

1.查看log配置:

进入:/config/installation_config.yml

# if you dont specify locked attribute, the default value will be true
# which means the particular config will be locked
- name: INSTALLATION_NAME
  value: 'Dell'
- name: LOGO_THUMBNAIL
  value: '/brand-assets/logo_thumbnail.svg'
- name: LOGO
  value: '/brand-assets/logo.svg'
- name: BRAND_URL
  value: 'https://www.dell.com/zh-cn'
- name: WIDGET_BRAND_URL
  value: 'https://www.dell.com/zh-cn'
- name: BRAND_NAME
  value: 'Dell'
- name: TERMS_URL
  value: 'https://www.dell.com/zh-cn'
- name: PRIVACY_URL
  value: 'https://www.dell.com/zh-cn'
- name: DISPLAY_MANIFEST
  value: true
- name: MAILER_INBOUND_EMAIL_DOMAIN
  value:
  locked: false
- name: MAILER_SUPPORT_EMAIL
  value:
  locked: false
- name: CREATE_NEW_ACCOUNT_FROM_DASHBOARD
  value: false
  locked: false
- name: INSTALLATION_EVENTS_WEBHOOK_URL
  value:
  locked: false
- name: CHATWOOT_INBOX_TOKEN
  value:
  locked: false
- name: CHATWOOT_INBOX_HMAC_KEY
  value:
  locked: false
- name: API_CHANNEL_NAME
  value:
- name: API_CHANNEL_THUMBNAIL
  value:
- name: ANALYTICS_TOKEN
  value:
- name: ANALYTICS_HOST
  value:
- name: DIRECT_UPLOADS_ENABLED
  value: false
  locked: false
- name: HCAPTCHA_SITE_KEY
  value:
  locked: false
- name: HCAPTCHA_SERVER_KEY
  value:
  locked: false
- name: LOGOUT_REDIRECT_LINK
  value: /app/login
  locked: false
- name: DISABLE_USER_PROFILE_UPDATE
  value: false
  locked: false

系统一启动时候,会将此参数加载到:installation_configs表:
image.png

2.查看log位置:

在public/brand-assets/logo.svg可以找到对应的文件:
我们需要的时候可以更改此文件。

3.更改操作

修改public/brand-assets/logo.svg图标,然后,我们登录进入数据库,修改数据库东西,然后我们再次进入redis客户端,执行:

FLUSHALL

Change Logo and Name

11.修改头像

我们上传头像时候发现,提示上传成功了,但是查看头像时候出现了如下错误:

12:02:27 backend.1  |   Disk Storage (0.1ms) Downloaded file from key: ou2iw9sqb0y23ezfrprztuap24sc
12:02:27 backend.1  | Completed 500 Internal Server Error in 4ms (ActiveRecord: 0.2ms | Allocations: 2466)
12:02:27 backend.1  | 
12:02:27 backend.1  | 
12:02:27 backend.1  |   
12:02:27 backend.1  | MiniMagick::Error (You must have ImageMagick or GraphicsMagick installed):

原来原因是没有安装:

I failed to install imagemagick. I reinstalled it, then an avatar is shown successfully,
Thanks!

在linux下如果出现问题:如下解决:
https://github.com/ImageMagic...

12.修改电话号码格式

修改:
app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

import ContactForm from './ContactForm';

然后进入ContactForm:app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

<div class="medium-12 columns">
        <label :class="{ error: $v.phoneNumber.$error }">
          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
          <input
            v-model.trim="phoneNumber"
            type="text"
            :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
            @input="$v.phoneNumber.$touch"
          />
          <span v-if="$v.phoneNumber.$error" class="message">
            {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR') }}
          </span>
        </label>
        <div
          v-if="$v.phoneNumber.$error || !phoneNumber"
          class="callout small warning"
        >
          {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
        </div>
      </div>

我们可以看到的校验:

phoneNumber: {
      isPhoneE164OrEmpty,
    },

然后进入:app/javascript/shared/helpers/Validators.js

export const isPhoneE164 = value => !!value.match(/^[0-9]*$/);
export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';

我们修改了:value.match(/^[0-9]*$/)为值。

13.修改主页面的title

app/views/layouts/vueapp.html.erb页面,我们可以发现:

 <title>
      <%= @global_config['INSTALLATION_NAME'] %>
    </title>

我们从:config/installation_config.yml里面:

- name: INSTALLATION_NAME
  value: 'Dell'

然后我们去数据库:installation_configs里面:
image.png
然后我们在redis-cli端:

FLUSHALL

14.表情大小更改

image.png
/app/javascript/shared/components/emoji/EmojiInput.vue里面

$font-size-medium: 18px;

改为:

$font-size-medium: 25px;

链接:

表情图标:
/app/javascript/widget/assets/images/message-send.svg

<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

其中20改为:30

图标大小是使用vue的组件如下:

https://github.com/chatwoot/chatwoot/blob/1bf2da180bc33074173063cbc813db3cd5fb62a1/app/javascript/widget/components/ChatAttachment.vue#L12

另一个测试:

app/javascript/widget/components/ChatInputWrap.vue

15.修改图标之间的间距

修改之间的间距为:
app/javascript/widget/components/ChatAttachment.vue

<button class="icon-button flex items-center justify-center" style="margin-right: 15px">
      <fluent-icon v-if="!isUploading.image" icon="attach" size="30" />
      <spinner v-if="isUploading" size="small" />
</button>

其中:style="margin-right: 15px" 设置为15px的大小。

16.客户端字体大小

app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue

改动:

.message-wrap {
      margin-right: var(--space-smaller);
      max-width: 100%;
      .chat-bubble {
        box-shadow: var(--shadow-medium);
        background: var(--color-woot);
        border-radius: var(--border-radius-large);
        color: var(--white);
        display: inline-block;
        font-size: var(--font-size-mini);
        line-height: 1.5;
        padding: var(--space-small) var(--space-one);
        text-align: left;
        word-break: break-word;
        max-width: 100%;
        &.user {
          border-bottom-right-radius: var(--border-radius-small);
        }
        &.agent {
          background: var(--white);
          border-bottom-left-radius: var(--border-radius-small);
          color: $tailwind-black-700;
        }
      }
    }

其中 font-size: 从:var(--font-size-nano) 到:var(--font-size-mini);

17.webpack dev_server configuration not found

image.png

webpack dev_server configuration not found in /Users/xiexinming/code/gitee/chatwoot/config/webpacker.yml[dev].

我们发现:webpacker.yml里面确实没有dev分支,改为development即可了

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0
    port: 3035
    public: 0.0.0.0:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

附录

进行数据库表结构创建
bin/rails db:migrate RAILS_ENV=development

我在规定的时间内,做到了我计划的事情;我自己也变得自信了,对于外界的人跟困难也更加从容了,我已经很强...

79 声望
21 粉丝
0 条评论
推荐阅读
hadoop集群搭建
那mapreduce是什么呢?它其实是一个分布式运算编程框架,是应用程序开发包,由用户按照编程规范进行程序开发,后打包运行在HDFS集群上,并且受到YARN集群的资源调度管理。

startshineye阅读 419

为什么要有refreshToken
当你第一次接触的时候,你有没有一个这样子的疑惑,为什么需要refreshToken这个东西,而不是服务器端给一个期限较长甚至永久性的accessToken呢?抱着这个疑惑我在网上搜寻了一番,其实这个accessToken的使用期限...

一口鸭梨阅读 526

推荐8个提高工作效率的IntelliJ插件
IntelliJ目前已经成为市面上最受欢迎的Java开发工具,这得益于里面非常丰富的插件机制。本文我将分享在日常开发中我经常使用的5个插件,它们可以帮助您提高工作效率。

视角线阅读 350

封面图
Apache ShardingSphere在转转亿级交易系统落地实践
大促期间DB压力大,单库查询qps上万占用大量数据库资源,写性能大大降低;数据与日剧增,单库中包含非常多数据量过数亿的大表,占用空间接近服务器的容量上限;数据量太大,数据备份和恢复需要耗费很长时间,极端...

小源学算法阅读 327

5种高大上的yml文件读取方式,你知道吗?
1、Environment在Spring中有一个类Environment,它可以被认为是当前应用程序正在运行的环境,它继承了PropertyResolver接口,因此可以作为一个属性解析器使用。先创建一个yml文件,属性如下:person: name: hydra...

数据先声阅读 319

5种高大上的yml文件读取方式,你知道吗?
1、Environment在Spring中有一个类Environment,它可以被认为是当前应用程序正在运行的环境,它继承了PropertyResolver接口,因此可以作为一个属性解析器使用。先创建一个yml文件,属性如下:person: name: hydra...

视角线阅读 296

封面图
Netty 概述
1、什么是 NettyNetty is an asynchronous event-driven network application frameworkfor rapid development of maintainable high performance protocol servers & clients.复制代码Netty 是一个异步的、基于...

一口鸭梨阅读 291

我在规定的时间内,做到了我计划的事情;我自己也变得自信了,对于外界的人跟困难也更加从容了,我已经很强...

79 声望
21 粉丝
宣传栏