-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7909 from braze-inc/develop
Leftover deploy - August 15, 2024
- Loading branch information
Showing
47 changed files
with
638 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
...atform_integration_guides/swift/advanced_use_cases/adding_braze_js_interface.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
--- | ||
nav_title: Adding the JavaScript Interface | ||
article_title: Adding the Braze JavaScript Interface to WebViews for Swift | ||
platform: Swift | ||
page_order: 5 | ||
description: "This reference article shows how to add the Braze JavaScript Interface to WebViews." | ||
|
||
--- | ||
|
||
# Adding the Braze JavaScript interface to WebViews | ||
|
||
> Learn how to add the Braze JavaScript interface to your iOS app, so you can leverage Braze in custom WebViews. After you add the interface, you'll be able to use the API for [HTML in-app messages]({{site.baseurl}}/user_guide/message_building_by_channel/in-app_messages/customize/#custom-html-messages) in your custom WebViews. | ||
## About the interface | ||
|
||
The Braze [`ScriptMessageHandler`](https://braze-inc.github.io/braze-swift-sdk/documentation/brazekit/braze/webviewbridge/scriptmessagehandler) is responsible for: | ||
|
||
1. Injecting the Braze Javascript bridge into your WebView, as outlined in [HTML in-app messages]({{site.baseurl}}/user_guide/message_building_by_channel/in-app_messages/customize/#custom-html-messages). | ||
2. Passing the bridge methods received from your WebView to the [Braze Swift SDK](https://github.com/braze-inc/braze-swift-sdk). | ||
|
||
## Adding the interface to a WebView | ||
|
||
First, add the [`ScriptMessageHandler`](https://braze-inc.github.io/braze-swift-sdk/documentation/brazekit/braze/webviewbridge/scriptmessagehandler) from `WebViewBridge` to your app. | ||
|
||
```swift | ||
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze) | ||
``` | ||
|
||
Add the initialized `scriptMessageHandler` to a WkWebView's `userContentController`. | ||
|
||
```swift | ||
configuration.userContentController.add( | ||
scriptMessageHandler, | ||
name: Braze.WebViewBridge.ScriptMessageHandler.name | ||
) | ||
``` | ||
|
||
Then create the WebView using your configuration. | ||
|
||
```swift | ||
let webView = WKWebView(frame: .zero, configuration: configuration) | ||
``` | ||
|
||
When you're finished, your code should be similar to the following: | ||
|
||
```swift | ||
// Create the script message handler using your initialized Braze instance. | ||
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze) | ||
|
||
// Create a web view configuration and setup the script message handler. | ||
let configuration = WKWebViewConfiguration() | ||
configuration.userContentController.addUserScript( | ||
Braze.WebViewBridge.ScriptMessageHandler.script | ||
) | ||
configuration.userContentController.add( | ||
scriptMessageHandler, | ||
name: Braze.WebViewBridge.ScriptMessageHandler.name | ||
) | ||
|
||
// Create the webview using the configuration | ||
let webView = WKWebView(frame: .zero, configuration: configuration) | ||
``` | ||
|
||
## Example: Logging a custom event | ||
|
||
In the following example, `BrazeBridge` is used to log a custom event from existing web content to the Braze Swift SDK. | ||
|
||
```javascript | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Logging data via BrazeBridge Example</title> | ||
<script> | ||
function logData(data) { | ||
window.brazeBridge.logCustomEvent(data); | ||
} | ||
</script> | ||
</head> | ||
|
||
<body> | ||
<input | ||
type="button" | ||
value="Click to log a custom Event 'completed_level'" | ||
onclick="logData('completed_level')" | ||
/> | ||
</body> | ||
</html> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.