Skip to content

Commit 7866cb5

Browse files
ishita1805ishita1805
committed
fix: remove duplicate content from branding
1 parent 85e1a4d commit 7866cb5

File tree

1 file changed

+4
-185
lines changed

1 file changed

+4
-185
lines changed

‎src/content/docs/realtime/realtimekit/ui-kit/custom-branding.mdx‎

Lines changed: 4 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -11,191 +11,10 @@ import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnipp
1111

1212
RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your meeting icons such as chat, clock, leave meeting, mic on and off, and more.
1313

14-
## Prerequisites
15-
1614
To get started with customizing the icons for your meetings, you need to first integrate RealtimeKit's Web SDK into your web application.
1715

1816
<RTKSDKSelector />
1917

20-
## Install the SDK
21-
22-
Install the package using npm, Yarn, or CDN.
23-
24-
<RTKCodeSnippet id="web-web-components">
25-
26-
To set up UI Kit components and web-core, add the following script tags inside the `<head>` tag:
27-
28-
```html
29-
<head>
30-
<script type="module">
31-
import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js";
32-
defineCustomElements();
33-
</script>
34-
<!-- Import Web Core via CDN -->
35-
<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>
36-
</head>
37-
```
38-
39-
You can also import utilities or any other export from CDN:
40-
41-
```html
42-
<head>
43-
<script type="module">
44-
import {
45-
provideRtkDesignSystem,
46-
extendConfig,
47-
} from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui/dist/esm/index.js";
48-
</script>
49-
</head>
50-
```
51-
52-
</RTKCodeSnippet>
53-
54-
<RTKCodeSnippet id="web-react">
55-
56-
```bash
57-
npm install @cloudflare/realtimekit-react-ui @cloudflare/realtimekit-react
58-
```
59-
60-
</RTKCodeSnippet>
61-
62-
<RTKCodeSnippet id="web-angular">
63-
64-
```bash
65-
npm install @cloudflare/realtimekit-angular-ui @cloudflare/realtimekit-angular
66-
```
67-
68-
</RTKCodeSnippet>
69-
70-
## Set up the meeting
71-
72-
1. Create a meeting room using the [Create Meeting API](/api/resources/realtime_kit/subresources/meetings/methods/create/)
73-
2. Generate an `authToken` using the [Add Participant API](/api/resources/realtime_kit/subresources/meetings/methods/add_participant/). An `authToken` is a unique token that is used to identify a user in the meeting
74-
3. Initialize the RealtimeKit client using `RealtimeKitClient.init({ authToken })`. It returns the meeting object
75-
4. Pass the meeting object to the UI Kit
76-
77-
<RTKCodeSnippet id="web-web-components">
78-
79-
The `rtk-meeting` component generates the default UI experience.
80-
81-
```html
82-
<body>
83-
<rtk-meeting id="my-meeting"></rtk-meeting>
84-
85-
<script>
86-
const init = async () => {
87-
const meeting = await RealtimeKitClient.init({
88-
authToken: "<participant_auth_token>",
89-
defaults: {
90-
audio: true,
91-
video: true,
92-
},
93-
});
94-
95-
const meetingEl = document.getElementById("my-meeting");
96-
meetingEl.meeting = meeting;
97-
};
98-
99-
init();
100-
</script>
101-
</body>
102-
```
103-
104-
</RTKCodeSnippet>
105-
106-
<RTKCodeSnippet id="web-react">
107-
108-
```jsx
109-
import {
110-
RealtimeKitProvider,
111-
useRealtimeKitClient,
112-
} from "@cloudflare/realtimekit-react";
113-
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
114-
import { useEffect } from "react";
115-
116-
function App() {
117-
const [meeting, initMeeting] = useRealtimeKitClient();
118-
119-
useEffect(() => {
120-
initMeeting({
121-
authToken: "<participant_auth_token>",
122-
defaults: {
123-
audio: true,
124-
video: true,
125-
},
126-
});
127-
}, []);
128-
129-
return (
130-
<RealtimeKitProvider value={meeting}>
131-
<RtkMeeting meeting={meeting} />
132-
</RealtimeKitProvider>
133-
);
134-
}
135-
```
136-
137-
</RTKCodeSnippet>
138-
139-
<RTKCodeSnippet id="web-angular">
140-
141-
```typescript title="app.component.ts"
142-
import { NgModule } from "@angular/core";
143-
import { BrowserModule } from "@angular/platform-browser";
144-
import { RTKComponentsModule } from "@cloudflare/realtimekit-angular";
145-
import { AppComponent } from "./app.component";
146-
147-
@NgModule({
148-
declarations: [AppComponent],
149-
imports: [BrowserModule, RTKComponentsModule],
150-
providers: [],
151-
bootstrap: [AppComponent],
152-
})
153-
export class AppModule {}
154-
```
155-
156-
_Optional_: If you are using TypeScript, set allowSyntheticDefaultImports as true in your tsconfig.json.
157-
158-
```typescript
159-
{
160-
"compilerOptions": {
161-
"allowSyntheticDefaultImports": true
162-
}
163-
}
164-
{
165-
"compilerOptions": {
166-
"allowSyntheticDefaultImports": true
167-
}
168-
}
169-
170-
```
171-
172-
Load the RtkMeeting component to your template file (component.html).
173-
174-
```html
175-
<rtk-meeting #myid></rtk-meeting>
176-
```
177-
178-
Initialise the meeting
179-
180-
```typescript
181-
class AppComponent {
182-
title = "MyProject";
183-
@ViewChild("myid") meetingComponent: RtkMeeting;
184-
rtkMeeting: RealtimeKitClient;
185-
186-
async ngAfterViewInit() {
187-
const meeting = await RealtimeKitClient.init({
188-
authToken: "<auth-token>",
189-
});
190-
meeting.join();
191-
this.rtkMeeting = meeting;
192-
if (this.meetingComponent) this.meetingComponent.meeting = meeting;
193-
}
194-
}
195-
```
196-
197-
</RTKCodeSnippet>
198-
19918
## Customize the default icon pack
20019

20120
RealtimeKit's default icon set is available at [icons.dyte.io](https://icons.dyte.io/). You can modify and generate your custom icon set from there.
@@ -270,10 +89,11 @@ function App() {
27089

27190
<RTKCodeSnippet id="web-angular">
27291
```typescript
92+
27393
class AppComponent {
274-
title = "MyProject";
275-
@ViewChild("myid") meetingComponent: RtkMeeting;
276-
rtkMeeting: RealtimeKitClient;
94+
title = "MyProject";
95+
@ViewChild("myid") meetingComponent: RtkMeeting;
96+
rtkMeeting: RealtimeKitClient;
27797

27898
async ngAfterViewInit() {
27999
const meeting = await RealtimeKitClient.init({
@@ -361,4 +181,3 @@ Explore additional customization options:
361181

362182
- [Render Default Meeting UI](/realtime/realtimekit/ui-kit/) - Complete meeting experience out of the box
363183
- [Build Your Own UI](/realtime/realtimekit/ui-kit/build-your-own-ui/) - Create custom meeting interfaces
364-
```

0 commit comments

Comments
 (0)