Bagikan melalui

Mengkustomisasi antarmuka pengguna dengan templat HTML di Azure Active Directory B2C

Penting

Berlaku mulai 1 Mei 2025, Azure AD B2C tidak akan lagi tersedia untuk dibeli untuk pelanggan baru. Pelajari lebih lanjut di FAQ kami.

Sebelum memulai, gunakan pemilih Pilih jenis kebijakan di bagian atas halaman ini untuk memilih jenis kebijakan yang Anda siapkan. Azure Active Directory B2C menawarkan dua metode untuk menentukan cara pengguna berinteraksi dengan aplikasi Anda: melalui alur pengguna yang telah ditentukan sebelumnya atau melalui kebijakan kustom yang sepenuhnya dapat dikonfigurasi. Langkah yang diperlukan dalam artikel ini berbeda untuk setiap metode.

Mencitrakan dan menyesuaikan antarmuka pengguna yang ditampilkan Azure Active Directory B2C (Azure AD B2C) kepada pelanggan Anda membantu memberikan pengalaman pengguna yang mulus dalam aplikasi Anda. Pengalaman ini termasuk mendaftar, masuk, pengeditan profil, dan pengaturan ulang kata sandi. Artikel ini memperkenalkan metode penyesuaian antarmuka pengguna (UI).

Petunjuk / Saran

Jika Anda hanya ingin memodifikasi logo banner, gambar latar belakang, dan warna latar belakang halaman alur pengguna Anda, Anda dapat mencoba fitur branding Perusahaan .

Gambaran umum HTML dan CSS kustom

Azure AD B2C menjalankan kode di browser pelanggan Anda dengan menggunakan Berbagi Sumber Daya Lintas Asal (CORS). Saat runtime, konten dimuat dari URL yang Anda tentukan dalam alur pengguna atau kebijakan kustom Anda. Setiap halaman dalam pengalaman pengguna memuat kontennya dari URL yang Anda tentukan untuk halaman tersebut. Setelah konten dimuat dari URL Anda, konten digabungkan dengan fragmen HTML yang disisipkan oleh Azure AD B2C, lalu halaman ditampilkan kepada pelanggan Anda.

Margin halaman konten kustom

Konten halaman HTML Khusus

Buat halaman HTML dengan merek Anda sendiri untuk melayani konten halaman kustom Anda. Halaman ini bisa menjadi halaman statis *.html , atau halaman dinamis seperti .NET, Node.js, atau PHP, namun, Azure B2C tidak mendukung mesin tampilan apa pun. Setiap penyajian sisi server halaman dinamis harus dilakukan oleh aplikasi web khusus.

Konten halaman kustom Anda dapat berisi elemen HTML apa pun, termasuk CSS dan JavaScript, tetapi tidak dapat menyertakan elemen yang tidak aman seperti iframe. Satu-satunya elemen yang diperlukan adalah elemen div dengan id diatur ke api, seperti yang ini <div id="api"></div> dalam halaman HTML Anda.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

Sesuaikan halaman Azure AD B2C bawaan

Alih-alih membuat konten halaman kustom dari awal, Anda dapat mengkustomisasi konten halaman default Azure AD B2C.

Tabel berikut mencantumkan konten halaman default yang disediakan oleh Azure AD B2C. Unduh file dan gunakan sebagai titik awal untuk membuat halaman kustom Anda sendiri. Lihat Contoh templat untuk mempelajari cara mengunduh dan menggunakan templat sampel.

Halaman Deskripsi Templat
Pendaftaran atau masuk terpadu Halaman ini menangani proses pendaftaran dan masuk pengguna. Pengguna dapat menggunakan penyedia identitas perusahaan, penyedia identitas sosial seperti Facebook, akun Microsoft, atau akun lokal. Klasik, Ocean Blue, dan Slate Gray.
Masuk (hanya) Halaman masuk juga dikenal sebagai Pilihan Penyedia Identitas. Ini menangani login pengguna dengan akun lokal, atau penyedia identitas terfederasi. Gunakan halaman ini untuk mengizinkan masuk tanpa bisa mendaftar. Misalnya sebelum pengguna dapat mengedit profil mereka. Klasik, Ocean Blue, dan Slate Gray.
Self-Asserted Sebagian besar interaksi di Azure AD B2C, di mana pengguna diharapkan untuk memberikan masukan, dinyatakan oleh pengguna itu sendiri. Misalnya, halaman pendaftaran, halaman masuk, atau halaman reset kata sandi. Gunakan templat ini sebagai konten halaman kustom untuk halaman pendaftaran akun sosial, halaman pendaftaran akun lokal, halaman masuk akun lokal, pengaturan ulang kata sandi, edit profil, halaman blokir, dan lainnya. Halaman yang dinyatakan sendiri dapat berisi berbagai kontrol input, seperti: kotak input teks, kotak entri kata sandi, tombol radio, kotak drop-down pilihan tunggal, dan kotak centang multi-pilih. Klasik, Ocean Blue, dan Slate Gray.
Autentikasi multifaktor Di halaman ini, pengguna dapat memverifikasi nomor telepon mereka (dengan menggunakan teks atau suara) selama pendaftaran atau masuk. Klasik, Ocean Blue, dan Slate Gray.
Kesalahan Halaman ini ditampilkan ketika terjadi pengecualian atau kesalahan. Klasik, Ocean Blue, dan Slate Gray.

Hosting konten halaman

Saat menggunakan file HTML dan CSS Anda sendiri untuk menyesuaikan UI, host konten UI Anda di titik akhir HTTPS yang tersedia untuk umum yang mendukung CORS. Misalnya, penyimpanan Azure Blob, Azure App Services, server web, CDN, AWS S3, atau sistem berbagi file.

Panduan untuk menggunakan konten halaman kustom

  • Gunakan URL absolut saat Anda menyertakan sumber daya eksternal seperti file media, CSS, dan JavaScript dalam file HTML Anda.

  • Dengan menggunakan tata letak halaman versi 1.2.0 ke atas, Anda dapat menambahkan data-preload="true" atribut di tag HTML Anda untuk mengontrol urutan beban untuk CSS dan JavaScript. Dengan data-preload="true", halaman dibangun sebelum ditampilkan kepada pengguna. Atribut ini membantu mencegah halaman "berkedip" dengan memuat file CSS terlebih dahulu, tanpa HTML yang tidak bergaya ditampilkan kepada pengguna. Cuplikan kode HTML berikut menunjukkan penggunaan data-preload tag.

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • Kami menyarankan agar Anda memulai dengan konten halaman default dan membangun di atasnya.

  • Anda dapat menyertakan JavaScript dalam konten kustom Anda.

  • Versi browser yang didukung adalah:

    • Internet Explorer 11, 10, dan Microsoft Edge
    • Dukungan terbatas untuk Internet Explorer 9 dan 8
    • Google Chrome 42.0 ke atas
    • Mozilla Firefox 38.0 ke atas
    • Safari untuk iOS dan macOS, versi 12 ke atas

  • Karena pembatasan keamanan, Azure AD B2C tidak mendukung frameelemen , , iframeatau form HTML.

Melokalisasi konten

Anda melokalisasi konten HTML dengan mengaktifkan kustomisasi bahasa di penyewa Azure AD B2C Anda. Mengaktifkan fitur ini memungkinkan Azure AD B2C untuk mengatur atribut bahasa halaman HTML dan meneruskan parameter ui_locales OpenID Connect ke titik akhir Anda.

Pendekatan templat tunggal

Selama pemuatan halaman, Azure AD B2C mengatur atribut bahasa halaman HTML dengan bahasa saat ini. Contohnya, <html lang="en">. Untuk merender gaya yang berbeda per bahasa saat ini, gunakan pemilih CSS :lang bersama dengan definisi CSS Anda.

Contoh berikut mendefinisikan kelas berikut:

  • imprint-en - Digunakan ketika bahasa saat ini adalah bahasa Inggris.
  • imprint-de - Digunakan ketika bahasa saat ini adalah Bahasa Jerman.
  • imprint - Kelas default yang digunakan ketika bahasa saat ini bukan bahasa Inggris atau Jerman.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

Elemen HTML berikut ditampilkan sesuai dengan bahasa halaman:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Pendekatan multi-pola

Fitur kustomisasi bahasa memungkinkan Azure AD B2C meneruskan parameter ui_locales OpenID Connect ke titik akhir Anda. Server konten Anda dapat menggunakan parameter ini untuk menyediakan halaman HTML khusus bahasa.

Nota

Azure AD B2C tidak meneruskan parameter OpenID Connect, seperti ui_locales, ke halaman pengecualian.

Konten dapat ditarik dari berbagai tempat berdasarkan lokal yang digunakan. Di titik akhir yang mendukung CORS, Anda menyiapkan struktur folder untuk menyediakan konten bagi bahasa tertentu. Anda memanggil yang tepat jika Anda menggunakan nilai {Culture:RFC5646} kartu bebas.

Misalnya, URI halaman kustom Anda mungkin terlihat seperti:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

Anda dapat memuat halaman dalam bahasa Prancis dengan menarik konten dari:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Panduan konten halaman kustom

Berikut adalah ringkasan prosesnya:

  1. Siapkan lokasi untuk menghosting konten halaman kustom Anda (titik akhir HTTPS yang dapat diakses publik dan diaktifkan CORS).
  2. Unduh dan kustomisasi file konten halaman default, misalnya unified.html.
  3. Publikasikan konten halaman kustom Anda ke endpoint HTTPS yang tersedia untuk umum.
  4. Atur berbagi sumber daya lintas asal (CORS) untuk aplikasi web Anda.
  5. Arahkan kebijakan Anda ke URI konten kebijakan kustom Anda.

Prasyarat

1. Buat konten HTML Anda

Buat konten halaman kustom dengan nama merek produk Anda di judul.

  1. Salin cuplikan HTML berikut. Ini adalah HTML5 yang terstruktur dengan baik dengan elemen kosong yang disebut <div id="api"></div> yang terletak di dalam <tag body> . Elemen ini menunjukkan tempat konten Azure AD B2C akan disisipkan.

    <!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

  2. Tempelkan cuplikan yang disalin di editor teks

  3. Gunakan CSS untuk menata elemen UI yang disisipkan Azure AD B2C ke halaman Anda. Contoh berikut menunjukkan file CSS sederhana yang juga menyertakan pengaturan untuk elemen HTML pendaftaran yang disisipkan.

    h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

  4. Simpan file sebagai customize-ui.html.

Nota

Elemen formulir HTML dihapus karena pembatasan keamanan jika Anda menggunakan login.microsoftonline.com. Jika Anda ingin menggunakan elemen formulir HTML dalam konten HTML kustom Anda, gunakan b2clogin.com.

2. Buat akun penyimpanan Azure Blob

Dalam artikel ini, kami menggunakan penyimpanan Azure Blob untuk menghosting konten kami. Anda dapat memilih untuk menghosting konten Anda di server web, tetapi Anda harus mengaktifkan CORS di server web Anda.

Nota

Di tenant Azure AD B2C, Anda tidak dapat memprovisikan penyimpanan Blob. Anda harus membuat sumber daya ini di penyewa Microsoft Entra Anda.

Untuk menghosting konten HTML Anda di penyimpanan Blob, gunakan langkah-langkah berikut:

  1. Masuk ke portal Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Microsoft Entra ID Anda dari menu Direktori + langganan.
  3. Di portal Microsoft Azure, cari dan pilih Akun penyimpanan
  4. Pilih + Buat.
  5. Pilih langganan untuk akun penyimpanan Anda.
  6. Buat grup Sumber Daya atau pilih grup yang sudah ada.
  7. Masukkan nama akun Penyimpanan unik untuk akun penyimpanan Anda.
  8. Pilih Wilayah geografis untuk akun penyimpanan Anda.
  9. Performa dapat tetap Standar.
  10. Redundansi dapat tetap penyimpanan redundan geografis (GRS)
  11. Pilih Tinjau + buat dan tunggu beberapa detik agar MICROSOFT Entra ID menjalankan validasi.
  12. Pilih Buat untuk membuat akun penyimpanan. Setelah penyebaran selesai, halaman akun penyimpanan terbuka secara otomatis atau Anda perlu memilih Buka sumber daya.

2.1 Membuat kontainer

Untuk membuat kontainer publik di penyimpanan Blob, lakukan langkah-langkah berikut:

  1. Di bawah Pengaturan di menu paling kiri, pilih Konfigurasi.
  2. Aktifkan Izinkan akses anonim Blob.
  3. Pilih Simpan.
  4. Di bawah Penyimpanan data di menu sebelah kiri, pilih Kontainer.
  5. Pilih +Kontainer.
  6. Untuk Nama, masukkan root. Nama dapat menjadi nama yang Anda pilih, misalnya contoso, tetapi kami menggunakan akar dalam contoh ini untuk kesederhanaan.
  7. Untuk Tingkat akses publik, pilih Blob. Dengan memilih opsi Blob , Anda mengizinkan akses baca-saja publik anonim untuk kontainer ini.
  8. Pilih Buat untuk membuat kontainer.
  9. Pilih root untuk membuka kontainer baru.

2.2 Mengunggah file konten halaman kustom Anda

  1. Pilih Unggah.
  2. Pilih ikon folder di samping Pilih file.
  3. Navigasi ke dan pilih customize-ui.html, yang Anda buat sebelumnya di bagian kustomisasi UI Halaman.
  4. Jika Anda ingin mengunggah ke subfolder, perluas Tingkat Lanjut dan masukkan nama folder di Unggah ke folder.
  5. Pilih Unggah.
  6. Pilih blobcustomize-ui.html yang Anda unggah.
  7. Di sebelah kanan kotak teks URL , pilih ikon Salin ke clipboard untuk menyalin URL ke clipboard Anda.
  8. Di browser web, navigasikan ke URL yang Anda salin untuk memverifikasi bahwa blob yang Anda unggah dapat diakses. Jika tidak dapat diakses, misalnya jika Anda mengalami ResourceNotFound kesalahan, pastikan jenis akses kontainer diatur ke blob.

3. Mengonfigurasi CORS

Konfigurasikan penyimpanan Blob untuk Berbagi Sumber Daya Lintas Asal dengan melakukan langkah-langkah berikut:

  1. Navigasi ke akun penyimpanan Anda.
  2. Di menu sebelah kiri, di bawah Pengaturan, pilih Berbagi sumber daya (CORS).
  3. Untuk Asal yang diizinkan, masukkan https://your-tenant-name.b2clogin.com. Ganti your-tenant-name dengan nama penyewa Azure AD B2C Anda. Contohnya, https://fabrikam.b2clogin.com. Gunakan semua huruf kecil saat memasukkan nama penyewa Anda.
  4. Untuk Metode yang Diizinkan, pilih keduanya GET dan OPTIONS.
  5. Untuk Header yang Diizinkan, masukkan tanda bintang (*).
  6. Untuk Header yang Diekspos, masukkan tanda bintang (*).
  7. Untuk Usia maksimal, masukkan 200.
  8. Di bagian atas halaman, pilih Simpan.

3.1 Uji CORS

Validasi bahwa Anda siap dengan melakukan langkah-langkah berikut:

  1. Ulangi langkah konfigurasi CORS. Untuk Asal yang diizinkan, masukkan https://www.test-cors.org
  2. Navigasi ke www.test-cors.org
  3. Untuk kotak URL Jarak Jauh , tempelkan URL file HTML Anda. Misalnya: https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. Pilih Kirim Permintaan. Hasilnya harus XHR status: 200. Jika Anda menerima kesalahan, pastikan pengaturan CORS Anda sudah benar. Anda mungkin juga perlu menghapus cache browser atau membuka sesi penjelajahan pribadi dengan menekan Ctrl+Shift+P.

Pelajari selengkapnya tentang cara membuat dan mengelola akun penyimpanan Azure.

4. Perbarui alur pengguna

  1. Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan .
  2. Di portal Microsoft Azure, cari dan pilih AAD B2C.
  3. Di menu sebelah kiri, pilih Alur pengguna, lalu pilih alur pengguna B2C_1_signupsignin1 .
  4. Pilih Tata letak halaman, lalu di bawah Halaman pendaftaran atau masuk terpadu, pilih Ya untuk Menggunakan konten halaman kustom.
  5. Di URI halaman Kustom, masukkan URI untuk file custom-ui.html yang Anda rekam sebelumnya.
  6. Di bagian atas halaman, pilih Simpan.

5. Uji alur pengguna

  1. Di penyewa Azure AD B2C Anda, pilih Alur pengguna dan pilih alur pengguna B2C_1_signupsignin1 .
  2. Di bagian atas halaman, pilih Jalankan alur pengguna.
  3. Di panel di sisi kanan, pilih tombol Jalankan alur pengguna .

Anda akan melihat halaman yang mirip dengan contoh berikut dengan elemen yang berpusat pada file CSS yang Anda buat:

Browser web memperlihatkan halaman pendaftaran atau masuk dengan elemen UI kustom

4. Ubah file ekstensi

Untuk mengonfigurasi kustomisasi UI, salin ContentDefinition dan elemen turunannya dari file dasar ke file ekstensi:

  1. Buka file dasar kebijakan Anda. Contohnya, SocialAndLocalAccounts/TrustFrameworkBase.xml. File dasar ini adalah salah satu file kebijakan yang disertakan dalam paket pemula kebijakan kustom, yang seharusnya Anda peroleh dalam prasyarat, Mulai menggunakan kebijakan kustom.

  2. Cari dan salin seluruh konten elemen ContentDefinitions .

  3. Buka file ekstensi. Misalnya, TrustFrameworkExtensions.xml. Cari elemen BuildingBlocks . Jika elemen tidak ada, tambahkan elemen tersebut.

  4. Tempelkan seluruh konten elemen ContentDefinitions yang Anda salin sebagai anak dari elemen BuildingBlocks .

  5. Cari elemen ContentDefinition yang berisi Id="api.signuporsignin" di XML yang Anda salin.

  6. Ubah nilai LoadUri ke URL file HTML yang Anda unggah ke penyimpanan. Contohnya, https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    Kebijakan kustom Anda akan terlihat seperti cuplikan kode berikut:

    <BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

  7. Simpan file ekstensi.

  8. Aktifkan JavaScript

5. Unggah dan uji kebijakan kustom yang diperbarui

5.1 Mengunggah kebijakan kustom

  1. Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan .
  2. Cari dan pilih Azure AD B2C.
  3. Di bawah Kebijakan, pilih Kerangka Kerja Pengalaman Identitas.
  4. Pilih Unggah kebijakan kustom.
  5. Unggah file ekstensi yang sebelumnya Anda ubah.

5.2 Menguji kebijakan kustom dengan menggunakan Jalankan sekarang

  1. Pilih kebijakan yang Anda unggah, lalu pilih Jalankan sekarang.
  2. Anda harus dapat mendaftar dengan menggunakan alamat email.

Mengonfigurasi URI halaman kustom dengan konten dinamis

Dengan menggunakan kebijakan kustom Azure AD B2C, Anda dapat mengirim parameter di jalur URL, atau string kueri. Dengan meneruskan parameter ke titik akhir HTML, Anda dapat mengubah konten halaman secara dinamis. Misalnya, Anda dapat mengubah gambar latar belakang pada halaman pendaftaran atau masuk Azure AD B2C, berdasarkan parameter yang Anda lewati dari web atau aplikasi seluler Anda. Parameter dapat berupa pemecah masalah klaim apa pun, seperti ID aplikasi, ID bahasa, atau parameter string kueri kustom, seperti campaignId.

Mengirim string kueri parameter

Untuk mengirim parameter string kueri, dalam kebijakan pihak yang mengandalkan, tambahkan elemen ContentDefinitionParameters seperti yang ditunjukkan di bawah ini.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

Dalam definisi konten Anda, ubah nilai menjadi LoadUrihttps://<app_name>.azurewebsites.net/home/unified. Kebijakan ContentDefinition kustom Anda akan terlihat seperti cuplikan kode berikut:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Saat Azure AD B2C memuat halaman, azure AD B2C melakukan panggilan ke titik akhir server web Anda:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=00001111-aaaa-2222-bbbb-3333cccc4444

URI konten halaman dinamis

Konten dapat ditarik dari tempat yang berbeda berdasarkan parameter yang digunakan. Di titik akhir yang mendukung CORS Anda, siapkan struktur folder untuk menyimpan konten. Misalnya, Anda dapat mengatur konten dalam struktur berikut. Folder akar/folder untuk tiap bahasa/file html Anda. Misalnya, URI halaman kustom Anda mungkin terlihat seperti:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C mengirimkan kode ISO dua huruf untuk bahasa tersebut, fr untuk bahasa Prancis:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Contoh templat

Anda dapat menemukan contoh templat untuk kustomisasi UI di sini:

git clone https://github.com/azure-ad-b2c/html-templates

Proyek ini berisi templat berikut:

Untuk menggunakan sampel:

  1. Kloning repositori di komputer lokal Anda. Pilih folder /AzureBlue, /MSA, atau /classic templat.

  2. Unggah semua file di bawah folder templat dan /src folder, ke penyimpanan Blob seperti yang dijelaskan di bagian sebelumnya.

  3. Selanjutnya, buka setiap \*.html file di folder templat. Kemudian ganti semua instans https://login.microsoftonline.com URL, dengan URL yang Anda unggah di langkah 2. Contohnya:

    Dari:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF

    Kepada:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF

  4. \*.html Simpan file dan unggah ke penyimpanan Blob.

  5. Sekarang ubah kebijakan, arahkan ke file HTML Anda, seperti yang disebutkan sebelumnya.

  6. Jika Anda melihat font, gambar, atau CSS yang hilang, periksa referensi Anda dalam kebijakan ekstensi dan \*.html file.

Menggunakan aset branding perusahaan dalam HTML kustom

Untuk menggunakan aset branding perusahaan dalam HTML kustom, tambahkan tag berikut di luar <div id="api"> tag. Sumber gambar diganti dengan gambar latar belakang dan logo banner.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Konten terkait

Pelajari cara mengaktifkan kode JavaScript sisi klien.