diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html
index c7241d33..a862c399 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html
@@ -32,7 +32,19 @@
vpn_key
API KEY
- Generate and manage your API key for REST API access
+
+ Generate and manage your API key for
+
+ REST API
+ open_in_new
+
+ access
+
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss
index cee001bc..5cd25c4f 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss
@@ -5,8 +5,28 @@
padding: var(--ov-meet-button-padding-vertical) var(--ov-meet-button-padding-horizontal);
}
}
+
// API Key Section - use utility classes
.api-key-section {
+ .rest-api-link {
+ color: var(--ov-meet-text-on-accent);
+ // text-decoration: none;
+ border-bottom: 1px solid transparent;
+ transition: border-color 0.2s ease;
+
+ mat-icon {
+ font-size: var(--ov-meet-font-size-md);
+ width: var(--ov-meet-font-size-md);
+ height: var(--ov-meet-font-size-md);
+ vertical-align: middle;
+ }
+
+ &:focus {
+ outline: 2px solid var(--ov-meet-text-on-accent);
+ outline-offset: 2px;
+ }
+ }
+
.api-key-display {
@extend .ov-api-key-display;
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts
index 0687596e..91253db9 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts
@@ -1,5 +1,5 @@
import { Clipboard } from '@angular/cdk/clipboard';
-import { Component, effect, OnInit, signal } from '@angular/core';
+import { Component, effect, inject, OnInit, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
@@ -13,6 +13,7 @@ import { MeetApiKey } from '@openvidu-meet/typings';
import { ApiKeyService } from '../../../../shared/services/api-key.service';
import { GlobalConfigService } from '../../../../shared/services/global-config.service';
import { NotificationService } from '../../../../shared/services/notification.service';
+import { RuntimeConfigService } from '../../../../shared/services/runtime-config.service';
@Component({
selector: 'ov-embedded',
@@ -31,6 +32,9 @@ import { NotificationService } from '../../../../shared/services/notification.se
styleUrl: './embedded.component.scss'
})
export class EmbeddedComponent implements OnInit {
+ private runtimeConfigServc = inject(RuntimeConfigService);
+ restApiDocsUrl = signal('');
+
isLoading = signal(true);
hasWebhookChanges = signal(false);
@@ -85,6 +89,10 @@ export class EmbeddedComponent implements OnInit {
}
async ngOnInit() {
+ // Build the REST API documentation URL with base href
+ const docsPath = 'api/v1/docs/';
+ this.restApiDocsUrl.set(this.runtimeConfigServc.basePath ? `${this.runtimeConfigServc.basePath}${docsPath}` : `/${docsPath}`);
+
this.isLoading.set(true);
await this.loadApiKeyData();
await this.loadWebhookConfig();
diff --git a/meet-ce/frontend/src/assets/styles/_tokens-themes.scss b/meet-ce/frontend/src/assets/styles/_tokens-themes.scss
index 856d53f8..52cd932d 100644
--- a/meet-ce/frontend/src/assets/styles/_tokens-themes.scss
+++ b/meet-ce/frontend/src/assets/styles/_tokens-themes.scss
@@ -18,7 +18,7 @@
--ov-meet-text-disabled: #bdbdbd;
--ov-meet-text-on-primary: #ffffff;
--ov-meet-text-on-secondary: #ffffff;
- --ov-meet-text-on-accent: #ffffff;
+ --ov-meet-text-on-accent: #4ba3eb;
--ov-meet-text-on-surface: #494949;
--ov-meet-text-on-background: #212121;
@@ -37,7 +37,6 @@
// === DARK THEME ===
// Activated when the [data-theme="dark"] attribute is present on html
[data-theme='dark'] {
-
--ov-meet-color-info: #2a9bf7;
// === SURFACE COLORS - DARK THEME ===
@@ -54,6 +53,7 @@
--ov-meet-text-secondary: #a5a5b5;
--ov-meet-text-hint: #7c7c8c;
--ov-meet-text-disabled: #5a5a68;
+ --ov-meet-text-on-accent: #3ea8ff;
--ov-meet-text-on-surface: #e4e4ec;
--ov-meet-text-on-background: #e4e4ec;