Mairaウィジェットの統合
Maira AIアシスタントを自分のサイトに統合するには、HTMLドキュメントの <head> セクションに以下のスクリプトタグを追加します。
<!-- Maira AI Advisor -->
<script type="text/javascript">
(function(){
const clientKey = 'CLIENT_KEY'; // クライアント機密キー
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src=`https://stg.maira.gigalogy.com/loader`;
// s1.setAttribute('crossorigin','*');
s1.setAttribute('data-greeting','YOUR_GREETING_MESSAGE');
s1.setAttribute('data-client-key', clientKey);
// s1.setAttribute('data-chat-header','YOUR_CHAT_HEADER');
s1.setAttribute('data-icon-color','YOUR_ICON_COLOR');
// s1.setAttribute('data-icon-bottom-position','YOUR_ICON_BOTTOM_POSITION');
// s1.setAttribute('data-iframe-bottom-position','YOUR_IFRAME_BOTTOM_POSITION');
s1.setAttribute('data-prefix', window.location.hostname);
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<script type="text/javascript">
(function(){function widgetApi(){return new Promise((resolve)=>{
let timeoutId;const getApi=()=>{const event=new Event('getWidgetApi');
timeoutId=window.setTimeout(getApi,1000);window.dispatchEvent(event)};
const onWidgetApi=(e)=>{const api=e.detail;window.clearTimeout(timeoutId);
resolve(api)};window.addEventListener('widgetApi',onWidgetApi,{once:true});getApi();});}
const customColorSet={
// "--message-header-background-color": "#YOUR_MESSAGE_HEADER_BACKGROUND_COLOR",
};
const customTheme='YOUR_CUSTOM_THEME';
widgetApi().then(api=>{
// クライアントのウェブサイトのUSER_IDとMEMBER_IDを提供します。（ログイン時）
// api.updateIdentifiers({userId: 'YOUR_USER_ID', memberId: 'YOUR_MEMBER_ID'});
api.sendConfig({theme:customTheme,colorSet:customColorSet});
});})();
</script>
<!-- End Maira AI Advisor -->
最初のスクリプトタグ
const clientKey パラメータでは、あなたの 'CLIENT_KEY' を設定します。このキーは、あなたのプロジェクトのためにGigalogyが提供した機密キーです。
data-greeting プロパティは、新しいユーザーに対してパーソナライズされた挨拶メッセージを表示するために設計されています。このメッセージは、ストアの特定の要件やブランディングに応じてカスタマイズまたは変更できます。例えば、s1.setAttribute('data-greeting','お手伝いできることはありますか？'); のように設定します。
data-icon-colorプロパティを使用すると、チャットアイコンの色をカスタマイズできます。このプロパティは、チャットアイコンの希望するビジュアルに合わせて変更できます。例えば、s1.setAttribute('data-icon-color','#4DB6AC'); のように設定します。
チャットヘッダーをカスタマイズし、デフォルトのヘッダーを置き換えるには、data-chat-header プロパティをコメントアウトし、修正したバージョンを提供します。これにより、あなたの仕様に沿ったチャットヘッダーが表示されます。例：s1.setAttribute('data-chat-header','Maira AI Advisor');
位置プロパティを変更して、ウェブサイト内のチャットアイコンとアシスタントウィンドウの配置をカスタマイズできます。これにより、好みに応じて配置を調整できます。上記のスクリプト内ではコメントアウトされています。
// s1.setAttribute('data-icon-bottom-position','20px');
// s1.setAttribute('data-iframe-bottom-position','100px');
注意：チャットアイコンとアシスタントウィンドウの配置をカスタマイズするために位置プロパティを変更した後は、さまざまなウィンドウサイズでアシスタントをテストしてください。この確認は、異なる画面サイズでチャットボックスが切り取られていたり、ずれていたりすることを防ぐために重要です。
再訪時のユーザー認識やその他の関連目的のために、特定のユーザーデータをローカルストレージに保存し、管理します。ユーザー識別子を、同じアシスタントを採用している他のウェブサイトで使用されているものと区別するために、指定されたデータ接頭辞が保存されている各キーで使用されます。一貫性を保つために、この接頭辞を同じにするか、店舗名または認識可能なバリアントに揃えることをお勧めします。
s1.setAttribute('data-prefix', window.location.hostname);
2つ目のスクリプトタグ
2つ目のスクリプトタグは、アシスタントのさまざまなコンポーネントのテーマや色をカスタマイズするために使用され、パーソナライズされたスタイリングを可能にします。
現状のテーマとは異なるテーマにカスタマイズするには、以下のコードを使用します。:
const customTheme='YOUR_CUSTOM_THEME';\
指定されたテーマカラーはチャットウィンドウに適用され、カスタム外観になります。オレンジのテーマを設定するには、次のようにします：#FA5F11;
const customTheme='#FA5F11;
オレンジテーマ（#FA5F11）を設定すると、チャットウィンドウはオレンジのカラースキームに更新されます。
新しいテーマカラーに合わせるために、最初のタグ内のチャットアイコンの色も更新してください。
s1.setAttribute('data-icon-color','YOUR_ICON_COLOR');
ウェブサイトからアシスタントに user_id と member_id（ログインユーザー用）をオプションで提供することで、よりカスタマイズされた結果を得られます。
// クライアントのウェブサイトのUSER_IDとMEMBER_IDを渡します。（ログイン時）
// api.updateIdentifiers({userId: 'YOUR_USER_ID', memberId: 'YOUR_MEMBER_ID'});
このコードスニペットを使用して、チャットウィンドウ内の各コンポーネントの色をカスタマイズできます。
const customColorSet
以下は追加できるキーのリストです。
const myColorSet = {
// input
"--input-background-color": "#FF0000",
"--input-text-color": "#fff",
"--input-element-color": "rgb(0, 0, 255)",
"--input-attach-color": "#fff",
"--input-send-color": "#fff",
"--input-placeholder-color": "rgb(255, 255, 255)",
// message header
"--message-header-background-color": "#FF0000",
"--message-header-text-color": "#fff",
"--message-header-last-active-color": "rgb(0, 0, 255)",
"--message-header-back-color": "rgb(255, 255, 255)",
// chat list header
"--chatlist-header-background-color": "#FF0000",
"--chatlist-header-text-color": "rgb(255, 255, 255)",
"--chatlist-header-divider-color": "rgb(0, 128, 0)",
//chatlist
"--chatlist-background-color": "rgb(255, 192, 203)",
"--no-conversation-text-color": "rgb(255, 255, 255)",
//chat item
"--chatitem-background-color": "rgb(0, 0, 255)",
"--chatitem-selected-background-color": "rgb(255, 255, 0)",
"--chatitem-title-text-color": "#FF0000",
"--chatitem-content-text-color": "#FF0000",
"--chatitem-hover-color": "#FF0000",
//main container
"--container-background-color": "rgb(255, 192, 203)",
//loader
"--loader-color": "rgb(0, 128, 0)",
//message list
"--messagelist-background-color": "rgb(0, 0, 255)",
"--no-message-text-color": "rgb(255, 255, 255)",
// incoming message
"--incoming-message-text-color": "rgb(255, 255, 255)",
"--incoming-message-name-text-color": "rgb(255, 255, 255)",
"--incoming-message-background-color": "rgb(0, 128, 0)",
"--incoming-message-timestamp-color": "rgb(255, 255, 255)",
"--incoming-message-link-color": "#FF0000",
//outgoing message
"--outgoing-message-text-color": "#FF0000",
"--outgoing-message-background-color": "rgb(255, 255, 0)",
"--outgoing-message-timestamp-color": "#FF0000",
"--outgoing-message-checkmark-color": "#FF0000",
"--outgoing-message-loader-color": "#FF0000",
"--outgoing-message-link-color": "rgb(0, 128, 0)",
}
上記のスニペットに異なるキーを追加して試し、結果を見てください。そしてキーを調整し、サイト全体の見栄えに最適化してください。