ウェブサイト向けサポートデスク

script タグ 1 つで Web サイトにサポートを追加する

SupDesk は、単一の script タグで Web サイトにシームレスに統合されます。フィードバックボード、ライブチャット、ヘルプセンターを埋め込めます——すべてあなたのブランドに合わせてカスタマイズ可能です。

クイックスタート: JavaScript ウィジェット

あなたの Web サイトにこのスクリプトを追加してください:

<script
  src="https://cdn.supdesk.app/widget.js"
  data-portal="https://feedback.yourapp.com"
  defer
></script>

ウィジェットは、ページの右下隅に自動的に読み込まれます。

フレームワーク別の例

React:

import { useEffect } from "react";
 
function SupportWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.supdesk.app/widget.js";
    script.dataset.portal = "https://feedback.yourapp.com";
    script.async = true;
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);
 
  return null;
}

Vue 3:

<script setup>
import { onMounted, onUnmounted } from "vue";
 
onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://cdn.supdesk.app/widget.js";
  script.dataset.portal = "https://feedback.yourapp.com";
  document.body.appendChild(script);
});
 
onUnmounted(() => {
  const script = document.querySelector('script[src*="supdesk.app"]');
  if (script) script.remove();
});
</script>

WordPress:

// Add to your theme's functions.php
function add_supdesk_widget() {
}
add_action('wp_footer', 'add_supdesk_widget');

または、WordPress プラグインリポジトリのプラグインを使用してください。

Next.js (App Router):

export default function Layout({ children }) {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.supdesk.app/widget.js";
    script.dataset.portal = "https://feedback.yourapp.com";
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);
 
  return <>{children}</>;
}

Web サイトポータルの機能

投票機能付きフィードバックボード ユーザーはアイデアを投稿し、提案に投票し、次に来るものをフォローします。製品ロードマップに最適です。

ライブチャット統合 あなたのページに表示されるウィジェットです。ユーザーがチャットすると、メールやポータルのメッセージと同じ受信箱に入るメッセージになります。

ヘルプセンターウィジェット 検索可能なナレッジベース記事を、サポートページやサイト全体に埋め込みます。

カスタムドメイン support.yourapp.com からポータルを配信します。自動 SSL とブランディング付きです。

ウィジェットのカスタマイズ

ウィジェットの外観を設定します:

window.SupDesk = {
  portal: "https://feedback.yourapp.com",
  theme: "light", // or 'dark'
  position: "bottom-right", // or 'bottom-left'
  color: "#3B82F6", // match your brand
};

Web サイトにサポートを追加する準備はできましたか?

無料で始められます。クレジットカードは不要です。supdesk.app でサインアップ

バックエンド統合のためのサーバーサイドSDK

各SDKのGitHubリポジトリから取得したライブコード例。

RabinApps/supdesk-nodeJavaScript / TypeScript

import { SupDesk } from "supdesk";

const supdesk = new SupDesk({ apiKey: process.env.SUPDESK_API_KEY! });

// Auto-pages: iterating walks every page for you.
for await (const submission of await supdesk.submissions.list({
  status: "open",
})) {
  console.log(submission.title);
}

await supdesk.submissions.create({
  type: "bug",
  title: "Export button does nothing",
  email: "user@example.com",
  body: "Clicking Export on the reports page has no effect.",
});

RabinApps/supdesk-pythonPython

from supdesk import SupDesk

supdesk = SupDesk()  # api_key=... or $SUPDESK_API_KEY

# Auto-pages: iterating walks every page for you.
for submission in supdesk.submissions.list(status="open"):
    print(submission.title)

supdesk.submissions.create(
    type="bug",
    title="Export button does nothing",
    email="user@example.com",
    body="Clicking Export on the reports page has no effect.",
)

RabinApps/supdesk-goGo

import "github.com/rabinapps/supdesk-go/supdesk"

client, err := supdesk.New(os.Getenv("SUPDESK_API_KEY"))
if err != nil {
    log.Fatal(err)
}

page, err := client.Submissions.List(ctx, supdesk.SubmissionsListParams{
    Status: ptr("open"),
})
if err != nil {
    return err
}
// Auto-pages: All walks every page for you.
for sub, err := range page.All(ctx) {
    if err != nil {
        return err
    }
    fmt.Println(sub.Title)
}

_, err = client.Submissions.Create(ctx, supdesk.SubmissionsCreateParams{
    Type:  supdesk.SubmissionTypeBug,
    Title: "Export button does nothing",
    Email: "user@example.com",
    Body:  "Clicking Export on the reports page has no effect.",
})

RabinApps/supdesk-dartDart

import 'dart:io';
import 'package:supdesk/supdesk.dart';

final supdesk = SupDesk(apiKey: Platform.environment['SUPDESK_API_KEY']!);

// Auto-pages: the stream walks every page for you.
final page = await supdesk.submissions.list(status: PostStatus.open);
await for (final submission in page.autoPaging()) {
  print(submission.title);
}

await supdesk.submissions.create(
  type: SubmissionType.bug,
  title: 'Export button does nothing',
  email: 'user@example.com',
  body: 'Clicking Export on the reports page has no effect.',
);