カレンダーの埋め込みコードを設定する方法

この投稿をシェアする

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

コンテンツを素早く簡単に理解するには、ビデオ形式の説明をご覧ください。

1. 埋め込みの利点 Timely ウェブサイト上のカレンダー

を利用して オンラインイベントカレンダー とシンプルです Timely。必要に応じて、プラットフォームが提供するスタンドアロンの公開カレンダーをいつでも使用できます。ただし、最適な結果を得るには、カレンダーの HTML コードを Web サイトに直接埋め込み、Web サイトでもライブ表示できるようにすることをお勧めします。

あなたの統合 Timely ウェブサイトにカレンダーを組み込むことには多くのメリットがあります。まず、イベントをより迅速かつ簡単にオーディエンスに共有できるようになります。次に、ウェブサイトのカレンダーから直接オンライン登録を受け付けたり、イベントのチケットを販売したりできます。最後に、ウェブサイトのトラフィックを増やすのにも効果的です。ユーザーはサードパーティのイベントチケット販売プラットフォームに誘導されるのではなく、イベント情報を得るためにウェブサイトを訪れるようになるでしょう。 

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

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

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

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

3. カレンダー埋め込みコードの設定

カレンダーの埋め込みコードを Web サイトのバックエンドに追加すると、Web サイト全体を公開できるようになります。 Timely 選択した Web ページのカレンダー。ただし、必要に応じて、埋め込みコードをカスタマイズして、特定のイベントのみを表示したり、カレンダーのデフォルト設定とは異なる形式で表示したりすることができます。

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

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

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

4.詳細設定

カレンダー埋め込みコードの種類オプションのすぐ下に、 「詳細設定」ドロップダウンメニューが表示されます。これらの設定は、選択した埋め込みコードの種類によって異なります。

カレンダーの埋め込みコードを編集する方法は次のとおりです。詳細設定:

日付範囲

利用可能なオプションを利用して、Web サイトにイベントを表示する日付の範囲を選択することができます。

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

これらのオプションは、主催するイベントの種類と、カレンダー コードを埋め込む場所に応じて役立ちます。たとえば、使用している場合 Timely 2 週間のフェスティバルを宣伝するには、 カスタムの日付範囲 オプション。開始日と終了日を設定するだけでイベントを表示できます。

「今後n日間」オプションを使用すると、カレンダーに表示するイベントの日数を指定できます。たとえば、今後5日間に開催されるイベントを10件公開したとします。「今後n日間」オプションを選択し、日数として「5」を設定すると、これらの10件のイベントがカレンダーに表示されます。一方、「今後n件のイベント」オプションを使用すると、表示するイベントの正確な数を指定できます。

デフォルトのビュー

詳細設定メニューでは、この埋め込みコードに対してイベントを表示するカレンダービューを選択できます。つまり、ビューごとに個別の埋め込みコードを作成することで、ウェブサイトでイベントを表示するために複数のカレンダービューを選択できます。たとえば、メインのイベントカレンダーページには目を引くビューを、ホームページにはよりすっきりとしたビューを選択できます。

現在、利用可能なカレンダー ビューは次のとおりです。

各表示オプションでは、カレンダーとイベントの 1 つの重要な機能が強調表示されます。全体の概要を把握できます Timelyのカレンダービュー デモ ページで見やすくするために変数を解析したりすることができます。

デフォルト言語

ウェブサイトのカレンダーを閲覧する際に、ユーザーが希望するカレンダー言語を選択できるようにすることもできますが、表示する言語を具体的に設定することも可能です。この機能は、多言語対応のウェブサイトを運営している場合に特に便利です。

現在、利用可能な言語は次のとおりです。

  • 英語(US)
  • 英語(英国)
  • デンマーク語
  • ドイツ語
  • スペイン語
  • 仏語
  • イタリア語
  • 中国語
  • 韓国語
  • オランダ語
  • ポーランド語
  • ポルトガル語
  • トルコ人
  • スウェーデン語
  • 日本語

ツールバーを非表示

「ツールバーを非表示」オプションを有効にすると、カレンダー上部のツールバーが表示されなくなります。そのため、日付やキーワードによるイベント検索、カレンダーのデフォルト言語や表示形式の変更など、その他のツールバー機能も利用できなくなります。

フィルターを非表示

フィルターを非表示にすると、視聴者が事前に設定されたイベント フィルターを使用してイベントを検索できなくなります。つまり、イベント カテゴリ、タグ、主催者、会場、およびカスタム フィルターは表示されません。

注:ツールバーを非表示にする設定とフィルターを非表示にする設定は、さまざまな状況で役立ちます。たとえば、ミニカレンダーやカレンダーウィジェットビューの埋め込みコードを作成する場合は、ツールバーとフィルターを非表示にする必要があります。

モダンビューを使用したカレンダーウィジェットの例
ストリームビューを使用したカレンダーウィジェットの例

「注目イベント」オプションを選択すると、カレンダーには注目イベントとしてマークされた公開済みのイベントのみが表示されます。

5. 埋め込みコードにフィルターを追加する

埋め込みコードのフィルターを設定すると、ユーザーは選択したフィルターに基づいて特定のイベントのみを表示できるようになります。

カレンダーを Web サイトに埋め込むためのフィルター設定の印刷画面

選択したフィルターに含まれていないイベントがユーザーに見つからないようにしたい場合は、該当する埋め込みコードに対して「フィルターを非表示にする」オプションを有効にすることをお勧めします。

ただし、それが望ましくない場合は、2 つの独立したものを持つことを検討することもできます。 Timely アカウントの下のカレンダー。たとえば、公開イベント用のカレンダーと、プライベート/社内イベント用のカレンダーです。この可能性について詳しく知りたい場合は、 お問い合わせ.

6. カレンダーの iFrame 埋め込みコードをコピーする

カレンダー埋め込みコードの詳細設定とフィルターをカスタマイズしたら、スニペット コードを生成します。以下の指示に従ってください。

  1. 以下を行うには、 ウィジェット コード (Web サイトにコピーします) フィルタリングしてオプションを選択します iFrame 埋め込み - JavaScript。
  2. クリック スニペットをコピー ボタンをクリックして埋め込みコードをコピーします。
のプリントスクリーン Timely イベントプラットフォームウィジェットコードセクション

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

インストール方法については、 Timely 他の CMS またはモバイル アプリケーションでは、 カスタマーサポートに連絡する.

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