オンラインストア向け画像のウィジェットコード: 買い物客のためのモックアップとアイデア

買い物客は、仕上がりを思い描くのに苦労しがちです。オリジナルのプリント、部屋の色、ギフトのアイデアなどです。AI画像ウィジェットなら、買い物客がイメージを言葉で伝え、ストアを離れずに数秒で生成された画像を見られます。ウィジェットはホワイトラベルなので、外部ツールではなくストアの一部のように見えます。

ストアで効果的なアイデア

• オリジナルプリントやグッズ: 「マグカップ用のミニマルな山の線画」は、買い物客がストアと相談するきっかけになります。
• インテリアや装飾: 関連商品を見る前に、訪問者が雰囲気をスケッチできます (「セージグリーンの落ち着いた北欧風の寝室」)。
• ギフト選び: 手早く作った画像が、何を注文するか決める助けになります。

これらの画像は実際にお届けする商品の写真ではなく、AIが生成したコンセプトであることをページで明確に伝えましょう。期待値を正しく保ち、返品を防げます。

商品ページやランディングページに追加する

ウィジェット で 画像 ウィジェットを作成し、保存してコードをコピーします。

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

多くのストア構築サービスでは、カスタムHTMLブロックが使えます。そこにタグを貼り付けるか、data-target で特定の要素内にウィジェットを描画しましょう。ウィジェットは独自のShadow DOM内で動くため、テーマのCSSとウィジェットが互いに干渉することはありません。

ストアらしい見た目にする

画像ウィジェットには、ロゴも「powered by」の表記もありません。タイトルとボタンをストアの口調で書き、ブランドのアクセントカラーを選び、ページに合うテーマを選びましょう。プレースホルダーで良いプロンプト例を見せてください。買い物客は目にしたものを真似します。

支出を予測可能に保つ

ストアには忙しい日もあるので、キャンペーンの前に上限を設定しておきましょう。

• ウィジェットを専用のAPIキーで動かします。エディターのキーリストの最後の選択肢が 新しいAPIキーを作成 です。そのキーに1日の利用上限を設け、選んだ画像モデルに限定しましょう。
• ウィジェット自体にも1日の利用上限を追加します。
• 設定、ウィジェットの管理 で、訪問者1人が1日に送れるリクエスト数を設定します。

利用状況 では、ウィジェットのリクエストをサイト別、ウィジェット別に確認できるので、このツールが費用に見合っているか判断できます。

自分のストアのドメインだけを許可する

設定、ウィジェットのサイト にストアのドメインを登録します。ドメインはサブドメインも含むため、example.com は www.example.com も対象になります。

ウィジェットページ でビルダーを試し、画像ウィジェットがストアでどう見えるか確かめてみましょう。