Sumber Data Eksternal

Setelah sumber data eksternal Anda diatur dengan benar, Anda dapat menggunakan outputnya dalam template email menggunakan bahasa template liquid.

Menggunakan Sumber Data Eksternal untuk Umpan Konten

Untuk menampilkan umpan konten, Anda dapat membuat API yang memberikan json dengan banyak item dari umpan konten. Sebagai contoh, ini dapat terlihat seperti di bawah ini:

{
  "feed": {
    "version": "1.0",
    "title": "sample-data-feed",
    "items": [
      {
        "title": "Meet the Full Cast",
        "link": "https://bird.com/article",
        "description": "See who's joining previously announced stars Katie Brayben and Christian Borle in the Elton John-Jake Shears-James Graham musical.",
        "thumbnail": "https://assets.bird.com.jpg",
        "date": "2024-08-28T11:21:00",
        "creator": "Joe Black"
      },
      {
        "title": "Stars in ASL American",
        "link": "https://bird.com/article",
        "description": "Center Theatre Group is teaming up with Deaf West Theatre to reopen the Mark Taper Forum with a new production of the Green Day musical after bringing revivals of Big River and Spring Awakening to Broadway.",
        "thumbnail": "https://assets.bird.com.jpg",
        "date": "2024-08-28T11:59:00",
        "creator": "Joe Black"
      }
    ]
  }
}

Umpan json di atas dapat digunakan sebagai URL API saat membuat sumber data eksternal.

Setelah dibuat, Anda dapat merujuknya dalam template email seperti berikut:

1. Pertama tambahkan elemen html dan masukkan kode di bawah ini untuk mengambil sumber data eksternal berdasarkan nama yaitu {% datafetch "external-data-source-name" %}

2. Gunakan fungsi for dalam liquid untuk mendapatkan semua item dalam umpan Anda beserta path-nya yaitu {% for <your-item> in dataFetchResponse.<your-json-path> %}.

Jika Anda hanya memiliki satu item, ini mungkin tidak diperlukan

Misalkan sample-data-feed adalah nama dari sumber data eksternal dan feed.items adalah path dalam umpan json untuk mendapatkan item, itu akan terlihat seperti di bawah ini:

{% datafetch "sample-data-feed" %}
{% for item in dataFetchResponse.feed.items %}

• Setelah ini ditambahkan, Anda kemudian dapat menambahkan elemen gambar, teks, tombol, dan merujuk ke sumber data eksternal seperti di bawah ini dengan asumsi struktur sample-data-feed:

{{item.title}} - Untuk menampilkan judul dalam elemen teks

{{item.description}} - Untuk menampilkan deskripsi dalam elemen teks

{{item.link}} - Untuk menambahkan tautan dalam elemen tombol

{{item.thumbnail}} - Untuk menambahkan URL sumber gambar dalam elemen gambar

• Sekarang tambahkan blok html lain untuk mengakhiri pengambilan sumber data eksternal dan fungsi for seperti ditunjukkan di bawah ini

{% endfor %}
{% enddatafetch %}

Untuk meninjau email Anda, Anda dapat beralih ke mode pratinjau dan melihat bagaimana tampilan umpan konten Anda

Catatan: Jika Anda memiliki umpan statis, Anda dapat menyegarkannya di sini secara manual dengan memilih sumber data eksternal di bawah dropdown Refresh External Data Source.