生成AI活用度診断をあなたのウェブサイトに簡単に埋め込む方法
最も簡単な埋め込み方法
おすすめセキュアな分離実行
安全シンプルなリンク設置
簡単以下のコードをHTMLに貼り付けるだけで利用開始できます：
<script src="https://your-domain.com/js/widget.js"></script>
<script src="https://your-domain.com/js/widget.js"
data-assessment-theme="minimal"
data-assessment-color="#0066cc"></script>
<script src="https://your-domain.com/js/widget.js"
data-assessment-config='{
"theme": "compact",
"width": "100%",
"color": "#4F46E5",
"shadow": true
}'></script>
JavaScriptから直接制御することも可能です：
<div id="assessment-container"></div>
<script src="https://your-domain.com/js/widget.js"></script>
<script>
// ウィジェット作成
const widget = AIAssessmentWidget.create(
document.getElementById('assessment-container'), {
theme: 'minimal',
color: '#0066cc',
onStart: function(data) {
console.log('診断開始:', data.email);
},
onComplete: function(result) {
console.log('診断完了:', result);
}
}
);
</script>
<iframe src="https://your-domain.com/embed.html"
width="100%"
height="600"
frameborder="0"
scrolling="no"
title="生成AI活用度診断">
</iframe>
<iframe src="https://your-domain.com/embed.html?theme=minimal&color=%230066cc&compact=true"
width="100%"
height="600"
frameborder="0"
scrolling="no">
</iframe>
<a href="https://your-domain.com/index.html" target="_blank">
生成AI活用度診断を受ける
</a>
<a href="https://your-domain.com/index.html" target="_blank"
style="display: inline-block;
padding: 12px 24px;
background: #4F46E5;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: background 0.3s;"
onmouseover="this.style.background='#3730A3'"
onmouseout="this.style.background='#4F46E5'">
🤖 AI活用度診断を受ける
</a>
A: 多くの場合、JavaScriptウィジェットが最適です。セキュリティを重視する場合はiframe、シンプルさを重視する場合はリンクボタンをお勧めします。
A: すべての診断結果は診断アプリのデータベースに保存され、results.htmlから管理できます。
A: 色、テーマ、サイズは自由に変更可能です。より高度なカスタマイズが必要な場合は、ソースコードを直接編集してください。
A: はい、すべての埋め込み方法がレスポンシブデザインに対応しており、モバイルデバイスでも正常に動作します。