diff --git a/src/i18n/en/nav.ts b/src/i18n/en/nav.ts index d6f53195..91fdb6b1 100644 --- a/src/i18n/en/nav.ts +++ b/src/i18n/en/nav.ts @@ -73,6 +73,8 @@ export default [ { text: 'OmniSearch', slug: 'tutorials/omnisearch', key: 'blog-installation' }, { text: 'Custom Dashboards', slug: 'tutorials/custom-dashboard', key: 'blog-installation' }, { text: 'Network Options (Web)', slug: 'installation/network-options', key: 'blog-installation' }, + { text: 'Spot (Chrome Extension)', slug: 'tutorials/spot', key: 'blog-tutorial' }, + //{ text: 'Setup OpenReplay', slug: 'installation/setup-or', key: 'blog-installation' }, //plugins diff --git a/src/pages/en/installation.mdx b/src/pages/en/installation.mdx index 8457b4fb..dcc1088a 100644 --- a/src/pages/en/installation.mdx +++ b/src/pages/en/installation.mdx @@ -16,4 +16,6 @@ This section contains everything you need to get started with OpenReplay, from b - [How to Sanitize Data](/installation/sanitize-data): How to sanitize data at both a global and/or granular level. - [How to create custom heuristic](/tutorials/custom-heuristics): Learn how to add custom logic to the backend to test for custom use behavior. - [How to use the OmniSearch bar](/tutorials/omnisearch): Learn how to get the most of our powerful search bar. -- [How to create your own custom dashboards](/tutorials/custom-dashboard): Create your own metrics and dashboards with this tutorial. \ No newline at end of file +- [How to create your own custom dashboards](/tutorials/custom-dashboard): Create your own metrics and dashboards with this tutorial. +- [How to use OpenReplay Spot](/tutorials/spot): Record bugs directly from your browser, with all the context developers need to fix them. + diff --git a/src/pages/en/tutorials.mdx b/src/pages/en/tutorials.mdx index b45e4ae4..aa442601 100644 --- a/src/pages/en/tutorials.mdx +++ b/src/pages/en/tutorials.mdx @@ -31,6 +31,7 @@ Learn from the below tutorials using real-world use cases. - [Creating custom dashboards](/tutorials/custom-dashboard): Learn how to leverage custom dashboards to visualize the current state of your system. - [Creating custom funnel](/tutorials/funnels): Learn how to create custom funnels to understand what's causing your conversion drops. - [Showing JavaScript errors on a custom dashboards](/tutorials/js-errors-dashboard): Add a custom metric (JS Errors) into your Dashboards with this tutorial. +- [Spot](/tutorials/spot): Record bugs directly from your browser, with all the context developers need to fix them. ### Integrations with other frameworks diff --git a/src/pages/en/tutorials/images/spot/share_spot.gif b/src/pages/en/tutorials/images/spot/share_spot.gif new file mode 100644 index 00000000..ccb8e490 Binary files /dev/null and b/src/pages/en/tutorials/images/spot/share_spot.gif differ diff --git a/src/pages/en/tutorials/images/spot/spot_settings.gif b/src/pages/en/tutorials/images/spot/spot_settings.gif new file mode 100644 index 00000000..9b89cbb3 Binary files /dev/null and b/src/pages/en/tutorials/images/spot/spot_settings.gif differ diff --git a/src/pages/en/tutorials/spot.mdx b/src/pages/en/tutorials/spot.mdx new file mode 100644 index 00000000..b9955c93 --- /dev/null +++ b/src/pages/en/tutorials/spot.mdx @@ -0,0 +1,101 @@ +--- +title: "How to use Spot" +metaTitle: "Use the OpenReplay Spot Chrome extension" +metaDescription: "Record and report bugs with all the context developers need to fix them." +--- + +import YoutubeVideo from '~/components/YoutubeVideo.astro' + + +## What is Spot + +[**Spot is a Chrome extension**](https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid) that makes bug reporting blazingly fast and simple. + +With Spot, you can easily record bugs right from your browser and share them instantly with your team. + +The end-result is a complete, ready-to-share bug report in video format, including user actions, console logs and errors, network payloads, and user agent data. + +In short, you get everything you need to report a bug faster than ever, and everything your team needs to fix it just as quickly. + + +## What you need to know + +- Spot is available on every [OpenReplay plan.](https://www.openreplay.com/pricing.html) +- Spot is only available for the Google Chrome browser. + +## How to install and set up the Spot Chrome extension + +### 1. Install the extension + +Installing the Spot Chrome extension is quick and easy: + +1. Go to the [**Spot extension page on the Chrome Web Store**](https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid) and click Add to Chrome. +2. Pin Spot to your Chrome toolbar for easy future access. + +### 2. Set up your OpenReplay Spot account + +Before you start using Spot, you need to either log in to your existing OpenReplay account or create a new one: + +- **OpenReplay cloud** + - **New users:** + 1. After pinning Spot, click on the Spot icon in your toolbar. + 2. Select **Create Account**. + 3. Choose your **primary use-case** for OpenReplay. + - If you select "report bugs via Spot" as your primary use-case, you can later access the full OpenReplay features by clicking on **Setup Tracker**. + - **Existing users:** + 1. Click on the pinned Spot extension in your toolbar. + 2. Select **Log in** and enter your OpenReplay credentials. + - You can find your Spots in the Spot menu in the left sidebar. +- **OpenReplay self-host** + - **New and existing users:** + - Update your OpenReplay instance to the latest version (v1.20.0) that supports Spot. + - Once updated, the Spot menu will appear in the left sidebar. Your Spots will be securely saved on your instance. + +### 3. You’re ready to go! + +Now that you’re logged in, you’re all set to start spotting and reporting bugs with Spot. + +## How to use the Spot Chrome extension + +Here’s how to use the Spot Chrome extension’s key features: + +### Record tab + +- **Start recording:** Click the Spot icon in your toolbar and select **Record Tab** to capture everything in the active tab. +- **Enable microphone:** If needed, toggle on the microphone option to include audio in your recording. +- **Pause recording:** Click on the pause icon from the recording panel at any time. +- **Restart recording:** Click on the restart icon from the recording panel to restart the recording. +- **Stop recording:** Click on the stop icon from the recording panel to stop the recording. +- **Add comments:** You can add comments to provide additional context before saving. +- **Save Spot:** After stopping the recording, it will automatically save with all the relevant technical details, like console logs and network data. + +### Record desktop + +- **Start recording:** Click the Spot icon and select **Record Desktop**. Choose to record your entire screen or a specific window. + +### Spot settings + +- **Access settings:** Click the Spot icon in your toolbar and select the **Settings** icon. +- **Go to Spot tab after save:** Toggle this on to be directed to the Spot recording immediately after saving. +- **Include DevTools:** Toggle this on to include console logs, network calls, and other debugging information in your recording. + +