changes for docs

src/pages/en/plugins/graphql.mdx

@@ -20,95 +20,106 @@ npm i @openreplay/tracker-graphql
 
 ## Usage
 
-The `plugin` call will return the function, which receives four variables `operationKind`, `operationName`, `variables` and `result`. It returns `result` without changes.
+Initialize the `@openreplay/tracker` package as usual and load the plugin into it.
+The `plugin` call will return the function, which receives four variables
+`operationKind`, `operationName`, `variables`, `result` and `duration` (default 0)
 
-### If your website is a Single Page Application (SPA)
+returns `result` without changes.
 
 ```js
-import OpenReplay from '@openreplay/tracker';
+import Tracker from '@openreplay/tracker';
 import trackerGraphQL from '@openreplay/tracker-graphql';
-//...
-const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY,
-});
 
-export const recordGraphQL = tracker.use(trackerGraphQL());
+const tracker = new Tracker({
+  projectKey: YOUR_PROJECT_KEY,
+});
 
-tracker.start();
+export const recordGraphQL = tracker.plugin(trackerGraphQL());
 ```
 
-### If your web app is Server-Side-Rendered (SSR)
+### Relay
 
-Follow the below example if your app is SSR. Ensure `tracker.start()` is called once the app is started on the client side (in `useEffect` or `componentDidMount`).
+If you're using [Relay network tools](https://github.com/relay-tools/react-relay-network-modern),
+you can simply [create a middleware](https://github.com/relay-tools/react-relay-network-modern/tree/master?tab=readme-ov-file#example-of-injecting-networklayer-with-middlewares-on-the-client-side)
 
 ```js
-// openreplay.js
-import OpenReplay from '@openreplay/tracker/cjs';
-import trackerGraphQL from '@openreplay/tracker-graphql/cjs';
-
-export const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
-});
-export const recordGraphQL = tracker.use(trackerGraphQL());
+import { createRelayMiddleware } from '@openreplay/tracker-graphql'
 
-// MyApp.js
-import { tracker } from './openreplay';
+const trackerMiddleware = createRelayMiddleware(tracker)
 
-function MyApp() {
-  useEffect(() => { // use componentDidMount in case of React Class Component
-    tracker.start();
-  }, [])
-}
-//...
+const network = new RelayNetworkLayer([
+  // your middleware
+  // ,
+  trackerMiddleware
+])
 ```
 
-### Relay
-
-For [Relay](https://relay.dev/) you should manually put `recordGraphQL` call to the `NetworkLayer` implementation. If you have standard `Network.create` way to implement it, then you should follow the below example.
+Or you can manually put `recordGraphQL` call
+to the `NetworkLayer` implementation. If you are standard `Network.create` way to implement it,
+then you should do something like below
 
 ```js
+import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
 import { Environment } from 'relay-runtime';
-import { recordGraphQL } from './openreplay'; // see above for recordGraphQL definition
 
-//...
+const handler = createGraphqlMiddleware(tracker)
+
 function fetchQuery(operation, variables, cacheConfig, uploadables) {
-  return fetch('ENDPOINT', {
-  //...
+  return fetch('www.myapi.com/resource', {
+    // ...
   })
     .then(response => response.json())
     .then(result =>
-      recordGraphQL(operation.operationKind, operation.name, variables, result)
+        handler(
+          // op kind, name, variables, response, duration (default 0)
+          operation.operationKind,
+          operation.name,
+          variables,
+          result,
+          duration,
+        ),
     );
 }
-//...
+
 const network = Network.create(fetchQuery);
 ```
 
 See [Relay Network Layer](https://relay.dev/docs/en/network-layer) for details.
 
 ### Apollo
 
-For [Apollo](https://www.apollographql.com/) you should create a new `ApolloLink` with `recordGraphQL` call and put it to your chain. Here is an example on how to do it.
+For [Apollo](https://www.apollographql.com/) you should create a new `ApolloLink`
 
 ```js
-import { ApolloLink } from '@apollo/client';
-import { recordGraphQL } from './openreplay'; // see above for recordGraphQL definition
+import { createTrackerLink } from '@openreplay/tracker-graphql'
+
+const trackerLink = createTrackerLink(tracker);
+const yourLink = new ApolloLink(trackerLink)
+```
+
+Alternatively you can use generic graphql handler:
+
+```js
+import { createGraphqlMiddleware } from '@openreplay/tracker-graphql'; // see above for recordGraphQL definition
+import { ApolloLink } from 'apollo-link';
+
+const handler = createGraphqlMiddleware(tracker)
 
 const trackerApolloLink = new ApolloLink((operation, forward) => {
-  return forward(operation).map((result) => {
-    const operationDefinition = operation.query.definitions[0];
-    return recordGraphQL(
-      operationDefinition.kind === 'OperationDefinition' ? operationDefinition.operation : 'unknown?',
+  return forward(operation).map(result =>
+    handler(
+      // op kind, name, variables, response, duration (default 0)
+      operation.query.definitions[0].operation,
       operation.operationName,
       operation.variables,
-      result
-    );
-  });
+      result,
+    ),
+  );
 });
-//...
+
 const link = ApolloLink.from([
   trackerApolloLink,
-  //...
+  // ...
 ]);
 ```
 

src/pages/en/sdk/constructor.mdx

@@ -206,6 +206,24 @@ interface IFeatureFlag {
     For an optimal recording, your tests should be done from a publicly available URL.
 </Aside>
 
+### Crossdomain iframe tracking
+
+```ts 
+	crossdomain?: {
+		/**
+		 * Enable cross-domain tracking
+		 * @default false
+		 * */
+		enabled?: boolean
+		/**
+		 * used to send message up, will be '*' by default
+		 * (check your CSP settings)
+		 * @default '*'
+		 * */
+		parentDomain?: string
+	}
+```
+
 ## Methods
 
 <div class="grid grid-cols-12 md:grid-cols-12 gap-3 md:gap-4">

src/pages/en/tutorials/crossdomain.mdx

@@ -0,0 +1,45 @@
+---
+title: "Crossdomain Iframe Tracking"
+metaTitle: "Crossdomain Iframe Tracking"
+metaDescription: "Track user interactions in crossdomain iframes with OpenReplay."
+---
+
+To enable crossdomain iframe tracking, you need to add the `crossdomain.enabled` option to the tracker's constructor, 
+then add domain area via `data-domain` to all desired iframes like so:
+
+```html
+<iframe
+	title="test"
+	src="http://iframe1.website.com/iframe-path"
+	width="300"
+	height="300"
+	data-domain="iframe1.website.com"
+></iframe>
+``` 
+
+Add following to your tracker constructor:
+
+```js
+const tracker = new OpenReplay({
+	projectKey: PROJECT_KEY,
+	crossdomain: {
+		enabled: true
+	},
+	captureIFrames: true
+});
+```
+
+then add tracker inside the desired iframe and add `crossdomain.parentDomain` to its constructor:
+
+```js
+const tracker = new OpenReplay({
+	projectKey: PROJECT_KEY,
+	crossdomain: {
+	  // specifies domain of parent window
+	  // if not specified, it will be set to '*'
+	  // which means that child window will send messages to all domains inside the browser window
+	  // consult your CSP settings to ensure that '*' is allowed or specify the parent domain
+		parentDomain: '*',
+	}
+});
+```