INTEGRITY Dokumentace

← Cloudflare Realtime / realtime / realtimekit / ui-kit

Přizpůsobení brandingu

UI Kit v RealtimeKit obsahuje všechny potřebné komponenty rozhraní a umožňuje kompletní přizpůsobení všech svých prvků. Můžete si upravit ikony schůzky, jako je chat, hodiny, opuštění schůzky, zapnutí a vypnutí mikrofonu a další.

Předpoklady

Než začnete přizpůsobovat ikony pro své schůzky, musíte nejprve integrovat Web SDK RealtimeKit do své webové aplikace.

Přizpůsobení výchozí sady ikon

Výchozí sada ikon RealtimeKit je dostupná na icons.realtime.cloudflare.com ↗. Odtud můžete upravovat a generovat vlastní sadu ikon.

Chcete-li nahradit výchozí sadu ikon RealtimeKitu vlastní sadou, předejte v UI komponentě odkaz na svou sadu ikon.

<body>
	<rtk-meeting id="my-meeting"></rtk-meeting>

	<script>
		const init = async () => {
			const meeting = await RealtimeKitClient.init({
				authToken: "<participant_auth_token>",
				defaults: {
					audio: true,
					video: true,
				},
			});

			const meetingEl = document.getElementById("my-meeting");
			meetingEl.meeting = meeting;

			// Pass custom icon pack URL
			meetingEl.iconPackUrl = "https://example.com/my-icon-pack.json";
		};

		init();
	</script>
</body>
import {
	RealtimeKitProvider,
	useRealtimeKitClient,
} from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
import { useEffect } from "react";

function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();

	useEffect(() => {
		initMeeting({
			authToken: "<participant_auth_token>",
			defaults: {
				audio: true,
				video: true,
			},
		});
	}, []);

	return (
		<RealtimeKitProvider value={meeting}>
			<RtkMeeting
				meeting={meeting}
				iconPackUrl="https://example.com/my-icon-pack.json"
			/>
		</RealtimeKitProvider>
	);
}
class AppComponent {
	title = "MyProject";
	@ViewChild("myid") meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		const meeting = await RealtimeKitClient.init({
			authToken: "<auth-token>",
		});
		meeting.join();
		this.rtkMeeting = meeting;
		if (this.meetingComponent) {
			this.meetingComponent.meeting = meeting;
			this.meetingComponent.iconPackUrl =
				"https://example.com/my-icon-pack.json";
		}
	}
}

Referenční dokumentace IconPack

IconPack je objekt, kde:

Dostupné ikony

Výchozí sada ikon obsahuje následující ikony:

Každá ikona v souboru JSON s vlastní sadou ikon by měla být definována jako dvojice klíč-hodnota, kde klíč odpovídá jednomu z výše uvedených názvů ikon a hodnotou je řetězec SVG pro danou ikonu.

Další kroky

Prozkoumejte další možnosti přizpůsobení: