HarmonyOS Integration
Embed Webnav.ai in a HarmonyOS app using the Web component.
ArkTS Web Component
typescript
// pages/Index.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({
src: 'https://yoursite.com',
controller: this.controller
})
.javaScriptAccess(true)
.domStorageAccess(true)
.width('100%')
.height('100%')
}
}
}Loading via Inline HTML
typescript
@Entry
@Component
struct DocQAWidget {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({
src: $rawfile('docqa.html'),
controller: this.controller
})
.javaScriptAccess(true)
.domStorageAccess(true)
.width('100%')
.height('100%')
}
}
}Create resources/rawfile/docqa.html:
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script src="https://widget.webnav.ai/widget/chat-widget.js" data-base-url="https://yoursite.com" data-theme="light" data-lang="en"></script>
</body>
</html>Network Permissions
Add internet permission to module.json5:
json
{
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}Troubleshooting
| Issue | Solution |
|---|---|
| Widget not loading | Confirm javaScriptAccess(true) is set |
| Blank page | Ensure domStorageAccess(true) is enabled |
| Network errors | Verify ohos.permission.INTERNET is declared |