次のJSと一緒のChatWoot

7003 ワード
webdev programming codenewbie opensource テキストリンク
ウェブサイトの連絡先からのサポートクライアントは難しいですか?場合は、すぐに簡単にこれに関連することができますコマースの所有者です.多くの質問/苦情は毎日来ます.それらを追跡、それらに返信は難しいです.特にあなたが媒体の大きいチームを持っているならば、これは維持するのがより難しいです.しかし、良いことがいくつかの解決策です.今日、我々はchatwootに入りそうです.ChatWutは、このプロセスをあなたのために簡単に行く!どうやって?
  • ChhatWtはあなたのウェブサイト(セットアップ+開発法案に多くの時間を節約)に追加するのは簡単です
  • ChatWutは、簡単にチームを管理するのを助けます
  • サポートチケットを簡単に管理
  • あなたはChatbotをここで統合することができます
  • あなたは1つのダッシュボード(管理しやすい)
    • から複数のプロジェクトを管理することができます
    また、chatWootの機能がたくさんあります.それで、我々は今日、ChatWootを探索するつもりです
    はじめに
    まず、chatWootプロジェクトを作成する必要があります
    -私たちは次のJSウェブサイトでchatWootを追加する必要があります

    プロジェクト・クリエーション


    ChatWootで始まる2つの方法があります
    1. Create an account on their website
2. Self-hosted chatwoot
    簡単な方法については、私はどのようにChatWootであなたのアカウントを作成することができますし、10分以内にあなたのウェブサイトにこれを追加する方法を示します.驚くべき権利?

    アカウントの作成は簡単で簡単です.あなたも確認メールを取得します.あなたが開始するには、有効なメールが必要です.

    ログインしたら、このページの詳細を見つけることができます

    あなたがチームを持っている場合は、チームメンバーを招待することができますし、複数のチームを追加することができます.かなり良い右?すべてのチームの質問はここから管理することができます.複数の人々を追加する前に、価格設定を見てください.無料版がありますが、制限があります

    さて、当社のウェブサイトでこの素晴らしいサービスを統合するために我々の旅を始めましょう

    最初に受信トレイを作成し、追加するサービスを選択します.今のところ、我々はちょうどウェブサイト

    ここではポートフォリオの例をやっています.私はここに私のウェブサイトドメインを加えています

    完了すると、受信トレイの部分が完了したら、エージェントを追加

    ここでは、チームメンバーを追加しなかったので、エージェントとしてだけを追加できます.あなたがチームメンバーを加えるならば、あなたは他の人々もここで見ます!

    エージェントを正常に割り当てると、次のページはこのようになります.後で使用する安全な場所にコピーできます.(チュートリアルの後にプロジェクトを削除しますので、ここでコードを保存するのを忘れてしまった場合は、独自のコードを取得します).私もあなたのための解決策がある!
    受信トレイが作成されると、受信トレイの下にプロジェクトが表示されます.ポートフォリオプロジェクトを見ることができます.コードを再度取得するには、受信トレイをクリックします

    これは

    私がポートフォリオの設定を見ることができるこのページと私が複数の受信箱プロジェクトを持っているならば、私はここでそれらのすべてを見ることができます.設定をクリックする

    ここから我々は任意のデータを変更することができます.我々はそれ+キャンペーンの時間にキャンペーンを追加することができます.必要に応じて変更できます.

    設定タブに行けば、あなたのウェブサイトに加えるためのスクリプトコードを見つけることができます.HTML、CSS、およびバニラJavaScriptのウェブサイトをしている場合は、HTMLの本文でこのスクリプトを追加できます.次のコード例
    
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatwoot integration</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .main-body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .heading {
        font-size: 40px;
      }
      .helper-text {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="main-body">
      <h1 class="heading">Chatwoot Integration by nerdjfpb</h1>
      <p class="helper-text">Click in chat icon to contact with us</p>
    </div>
    <!-- Adding chatwoot in the website -->
    <script>
      (function (d, t) {
        var BASE_URL = "https://app.chatwoot.com";
        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: "UiK961dgutY7mskgTzNDDszd",
            baseUrl: BASE_URL,
          });
        };
      })(document, "script");
    </script>
  </body>
</html>
    次の出力

    したら、チャットを開始するチャットのアイコンをクリックします

    かなり簡単右?しかし、我々の目標は、次のJSの権利でこれを追加することですか?

    なぜ次のJS？


    次のJSの反応JSに建てられた.反応プロジェクトでは、我々は通常、1つのページアプリケーションと他の機能のために適切に反応行為をするためにライブラリのトンを追加します.しかし、次のJSでは、我々はそれをインストールするときに多くの機能を取得します.何人か
    - Image optimization (without adding any extra library)
- Hybrid: SSG & SSR (without adding any extra library)
- File System Routing (without adding any extra library)
- Fast refresh (Easier for a developer to work with)
- Typescript support (For static types)
- Built-in-css support (Easy to work with CSS)
- Code splitting & building (More optimized)
    次の要件
  • ノードJS 12.0またはそれ以降の
  • Windows、LinuxまたはMacマシン
    • 反応JS についての
  • の知識
    このリンクから残りを読むことができます
    • DOMマニピュレーション
    Ibatisデータソースの動的構成の2つ