埋め込みコード

イベント スライダーの埋め込みコードを設定する方法

この投稿をシェアする

ととも​​に Timely アカウントを使用すると、Web サイトにイベント スライダーを簡単に埋め込んで、イベントをオンラインで表示できます。スライダー ウィジェットを埋め込むと、公開されたイベントに加えられたすべての変更が Web サイト上で自動的に更新されます。この投稿では、イベント スライダーの埋め込みコードを設定するすべての手順を学習します。

1. ウェブサイトにイベント スライダーを設置するメリット

オンライン イベント カレンダーの活用は簡単です。 Timely。特定のイベントを強調するには、美しく魅力的なイベント スライダーを Web サイトに追加することをお勧めします。

Timely イベント スライダー ウィジェットは、Web サイトにイベントを表示する効果的な方法です。スライダー ビューを使用すると、イベントをスライドショーとして表示できます。スライダーにはスライドごとに 1 つのイベントが表示されるため、イベントの認知度とエンゲージメントが高まります。実際に動作している様子をご覧ください イベントスライダーウィジェットのデモページ.

2. コンテンツ管理システム (CMS) をサポート 

Timelyのイベント プラットフォームとウィジェットは、公開または非公開の Web サイトやモバイル アプリケーションに埋め込むことができます。これらは、以下を含む (ただしこれらに限定されない) 多くの Web サイト コンテンツ プラットフォームと完全に連携します。

  • WordPress
  • HTML
  • Shopifyサービス
  • ウィックス
  • SquareSpace
  • Joomlaの
  • Drupal
  • マジェント / アドビコマース
  • Adobe Experience Manager
  • Weeblyの
  • GoDaddyは
  • Microsoft SharePoint / Power Pages
  • アジリティ

使用する CMS に関係なく、イベント スライダーの埋め込みコードを設定する一般的な手順は同じです。さらに詳しく知りたい場合は、読み続けてください。 

3. イベントスライダー埋め込みコードのセットアップ

CMS にイベント スライダー埋め込みコードを追加すると、美しいスライダー ウィジェットに限られた数のイベントを公開できるようになります。スライダーに表示したい特定の種類のイベントがある場合は、ウィジェット埋め込みコードをカスタマイズすることをお勧めします。

以下の詳しい手順を参照してください。

  1. にログインします Timely アカウント.
  2. メインのナビゲーション メニューで、 設定、次に 埋め込みコード。 ダッシュボードの右上隅にあるショートカットを使用することもできます。
  3. 次に、新しいページが開き、すべての埋め込みコードのオプションと設定が表示されます。現在、カレンダー、カルーセル、スライダー、イベント ボタンの追加の 4 つの埋め込みコード タイプから選択できます。
  4. この投稿はイベント スライダーの埋め込みコードを設定する方法に関するものであるため、 埋め込みタイプを選択してください スライダー オプションを選択します。
のプリントスクリーン Timely イベント管理ソフトウェアのスライダー埋め込みコード オプション

埋め込みコードをカスタマイズしたくない場合は、以下のウィジェット コード セクション (6. スライダー iFrame 埋め込みコードの設定) に直接進むことができます。それ以外の場合は、この投稿を読み続けて詳細を確認してください。  

4.詳細設定

すぐ下に スライダー コードタイプを埋め込むオプションを選択すると、 詳細設定 ドロップダウンメニュー。これらの設定は、選択した埋め込みコードの種類によって異なります。

イベント スライダー ウィジェットの埋め込みコードの詳細設定を編集する方法は次のとおりです。

スライダーの最大幅

この機能を使用すると、Web ページ上のこのウィジェットに利用可能なスペースに応じて、スライダーの最大幅を選択できます。

のプリントスクリーン Timely イベント管理システムの最大スライダー幅の設定

スライダーディレイタイム

必要に応じて、スライダーに表示される各イベント投稿の遅延時間を選択できます (秒単位)。

のプリントスクリーン Timely イベント管理システムのスライダー遅延時間の設定

日付範囲

必要に応じて、スライダー ウィジェットに表示されるイベントの日付範囲を選択できます。オプションは次のとおりです。

  • 今後のイベント
  • 今日のイベント
  • 明日から
  • カスタムの日付範囲
  • 次のn日
  • 次の n 件のイベント

カレンダーで注目としてマークされているイベントのみを表示したい場合は、ボックスをチェックしてください。 注目のイベント。

のプリントスクリーン Timely イベント管理システム スライダーの注目のイベント設定

5 フィルター

さらに、プリセット フィルターを適用することで、スライダーにどのイベントを表示するかを決定できます。カテゴリ、タグ、組織、会場、および作成したその他すべてのカスタム フィルターを選択できます。これは、顧客に見てもらいたいイベントのみを表示するのに役立ちます。

のプリントスクリーン Timely イベント管理システムのスライダーフィルター設定

6. スライダー iFrame 埋め込みコードのコピー

スライダー埋め込みコードの詳細設定とフィルターをカスタマイズしたら、埋め込みコードの生成に進むことができます。以下の指示に従ってください。

  1. クリック ウィジェット コード (Web サイトにコピーします) フィルタリングしてオプションを選択します iFrame 埋め込み - JavaScript。
  2. クリック スニペットをコピー ボタンをクリックして埋め込みコードをコピーします。
のプリントスクリーン Timely イベント管理システム スライダー埋め込みコード ジェネレーター

次に、Web サイトのバックエンドにコードを貼り付けて、 Timely スライダー。以下のリンクをクリックすると、次のコンテンツ管理システムにスライダー ウィジェット コードを埋め込む方法の詳細な手順が表示されます。

インストール方法については、 Timely 他の CMS またはモバイル アプリケーションのカレンダーとウィジェットを使用してください。 カスタマーサポートに連絡する.

ユーザーガイドの詳細については、次のサイトをご覧ください。 ヘルプセンター。ご質問がある場合、または追加のサポートが必要な場合は、お気軽にお問い合わせください。 Rescale Support。または、以下からサポート チケットを開くこともできます。 Timely アカウントのダッシュボード.