+
+Paste this URL and hit enter:
+```code
+https://github.com/sigmacomputing/embed-sdk.git
+```
+
+VSCode will prompt for the location to store the files on your computer. Navigate to the a top-level folder of your choice and click the `Select as Repository Destination` button.
+
+
+
+When prompted, open the cloned repository.
+
+The repository contains the entire `Embed-SDK` for you to explore, and there is a sample application we will use for demonstration.
+
+Before we do that, we need to install a few other dependencies to prepare the project folder for initial use.
+
+
+
+
+## Environment Setup
+Duration: 20
+
+We need to install Node and other related packages. While this can be done manually, Homebrew allows us to install Node and pnpm with a simple command.
+
+This avoids the need to manually download and install from the official websites.
+
+Using VSCode, open a new terminal session:
+
+
+
+Paste the following command into terminal and press Enter. This command will download and install Homebrew:
+
+```code
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+The system will prompt for your system password, and then wait till enter is pressed:
+
+
+
+Homebrew will be downloaded and setup. Once completed, a success message will be shown:
+
+
+
+To verify the installation, run the command:
+```code
+brew --version
+```
+
+A version number should be returned. If not, review the next section.
+
+### Brew: command not found error
+This error generally indicates that brew cannot be found by the terminal session. This can be resolved by manually adding Homebrew to the path.
+
+In terminal, open your .zshrc file with this command (still in terminal):
+```code
+nano ~/.zshrc
+```
+
+Add the following line at the end of the file to include Homebrew’s path:
+```code
+export PATH="/opt/homebrew/bin:$PATH"
+```
+
+
+
+
+Save the changes, overwriting the existing file (the commands are shown on the editor's footer).
+
+Close the editor after saving.
+
+Reload your shell configuration by running this command:
+```code
+source ~/.zshrc
+```
+
+The terminal prompt will reappear with no reply.
+
+Retry brew verification:
+```code
+brew --version
+```
+
+The expected response looks like this:
+
+
+
+
+
+
+### Runtime Environment - Node.js
+
+Node.js (Node) is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript engine and executes JavaScript plaintext outside a web browser, which was designed to build scalable network applications.
+
+We will install Node by using a terminal session in VSCode and leverage Homebrew via command line.
+
+In VSCode, open a new terminal session and run the following command to check if Node is already installed:
+
+```code
+node -v
+```
+
+In our case, we see a recent version number, so no need to install again:
+
+
+
+If Node.js is not already installed, install it by running the following command:
+
+```code
+brew install node
+```
+
+This command will download and install the latest stable version of Node along with npm (Node Package Manager) on your system. Once the installation is complete, you can verify the installation by checking the versions of Node.js as described earlier.
+
+
+
+### Additional Dependencies
+
+#### Corepack
+Corepack is a Node.js tool intended to manage versions of your package managers (Yarn, pnpm) without needing global installs of these package managers. It comes pre-installed with Node.js starting from version 16.10. We need to enable it.
+
+Run the following command to enable `Corepack`:
+
+```code
+corepack enable
+```
+
+The terminal prompt will appear with no other message unless there is an error.
+
+
+
+#### pnpm
+pnpm is a package manager like npm or Yarn, known for its efficiency regarding disk space and speed.
+
+Running pnpm i installs the dependencies listed in your project’s package.json file. It creates a node_modules directory where all your project’s dependencies are stored and also updates the pnpm-lock.yaml file, which ensures that the same versions of the dependencies are installed every time you or anyone else runs pnpm install.
+
+Run the following command to install `pnpm`:
+
+```code
+pnpm i
+```
+
+The results look like this:
+
+
+
+Open a browser and navigate to:
+```code
+http://localhost:3000
+```
+
+Sigma has provided a sample application page, with useful links.
+
+
+
+In the next section will will look at how the embed is configured in code.
+
+
+
+
+## Sample Application
+Duration: 5
+
+From the landing page, click the link for the `Sample Application`.
+
+The sample application has an example of a Sigma embed (provided from a Sigma instance) along with a list of the primary files involved.
+
+The list of files has tooltips to provide general information but the files themselves are commented to assist you.
+
+
+
+### Primary source files
+
+There are five files involved in this example embed:
+
+ -
+
- basic-example-wrapper.tsx: The SignedIframe component is responsible for securely embedding a Sigma Computing dashboard into a React application. +
Error loading iframe
; + } +} +``` + +-
+
- basic-example-embed.tsx: This file is a React component designed to embed a Sigma Computing dashboard using an iframe within a React application. +
+ {/* Conditional rendering: Display loading text if the iframe is loading */}
+ {loading &&
+ );
+}
+```
+
+ Loading...
} + {/* Conditional rendering: Display error message if there is an error loading the iframe */} + {error &&Error loading iframe
} + {/* Render the iframe, filling the parent container */} + +-
+
- page.mdx: Renders the webpage, SignedIframe and logs the Signed URL for console log display only. +
+
+ );
+}
+
+{/* Generate Signed URL for console log display only */}
+console.log("Signed URL:", signedSrc);
+```
+
+### Logging
+When the sample application is running, the server displayed in VSCode’s Terminal will show a one-time-use SignedURL for debugging purposes only. **While not required**, we’ve included this to demonstrate and assist in debugging any issues you may encounter while customizing embed parameters.
+
+Sigma Dashboard Example
+ + {/* Grid Container */} +
+
+ {/* Example Embed */}
+
+
+ {/* BasicExample Block - Full Width */}
+
+
+
+ {/*Files Involved*/}
+ Example Embed
++ The embed shown below is provided free of charge by Sigma Computing, as an example only. The files that + have been customized are listed on your left. +
++ While you will not be able to customize this example in terms of parameters that are + sent to Sigma by the Embed-SDK, you can review the files involved to see a working example of what is + minimally required. +
+
+
+ Files Involved (all files in docs/basic-examples/..)
+-
+
-
+
+ .env + +
+ -
+
+ /lib/utils.ts + +
+ -
+
+ app/examples/basic-example/basic-example-wrapper.tsx + +
+ -
+
+ /app/examples/basic-example/basic-example-embed.tsx + +
+
+
+ 
+
+
+
+
+## Customize the Embed
+Duration: 5
+
+We want to use our own Sigma instance for this embed, so we will need to do a few things.
+
+### 1: Embed credentials
+Log into your own Sigma instance as `Administrator` and navigate to `Administration` > `Developer Access` and click the button to `Create New` client credentials.
+
+Check the box on for `Embedding`, provide a name and assign the new credentials to a Sigma administrator for now.
+
+Copy the `Client Id` and `Secret` and update the `.env` file that is part of the new `basic-example` folder, over-writing the old values. `Save` the `.env` file.
+
+For more information on generating embed client credentials, [see here.](https://help.sigmacomputing.com/docs/generate-embed-client-credentials)
+
+### 2: Create a new workbook
+
+Create a new workbook in Sigma and add any available table to it. It does not matter at this point what content is added.
+
+
+
+Save the workbook, the name does not matter at this point.
+
+### 3: Share the Workbook
+Click the caret to the right of the workbook's name and select `Share...`. Share the workbook with any team, making note of which you selected.
+
+
+
+
+
+We are sharing ours with the `Sales_People` team:
+
+
+
+For more information on teams in Sigma, [see here.](https://help.sigmacomputing.com/docs/manage-teams)
+
+### Generate Embed URL
+Open the workbook's menu again and select `Embedding...` this time.
+
+Select `Secure` and `Entire Workbook`. Copy this url and click `Close`.
+
+Open the project file `basic-example-wrapper`, comment out the existing value for `const src` and place the following code for the new one, adjusting for your actual embed url value:
+```code
+const src = "";
+```
+
+
+
+### Embed parameters
+The last step is to adjust the parameters that the parent application will send to Sigma as it constructs the signedURL.
+
+Recall that this is done in the `utils.ts` file in the section `const searchParamsObject`.
+
+
+
+The only value we will change is the `external_user_team`, which we will set to `Sales_People` (yours may be different).
+
+We commented the old value and made a copy of the line, adjusting for the value of `Sales_People`:
+
+
+
+The rest can stay the same for now, while we test this works.
+
+Save the `utils.tx` file.
+
+### Test the application
+
+Refresh the browser using the url:
+```code
+http://localhost:3000/examples/basic-example
+```
+
+The workbook we elected to embed is shown on the React application page, in the iframe as expected:
+
+
+
+For more information on using parameters and user attributes in Sigma embedding scenarios, the following resources are available:
+
+Embed URL Parameters documentation, [see here.](https://help.sigmacomputing.com/docs/embed-url-parameters)
+
+[QuickStart on Parameters and User-Attributes](https://quickstarts.sigmacomputing.com/guide/embedding_05_leverage_parameters_and_ua/index.html?index=..%2F..index#0)
+
+Implement inbound and outbound events in embeds documentation, [see here.](https://help.sigmacomputing.com/docs/inbound-and-outbound-events-in-embeds)
+
+
+
+
+## What we've covered
+Duration: 5
+
+In this QuickStart we explored how to use the embedding SDK for React with Sigma.
+
+**Additional Resource Links**
+
+[Blog](https://www.sigmacomputing.com/blog/)+[Community](https://community.sigmacomputing.com/)
+[Help Center](https://help.sigmacomputing.com/hc/en-us)
+[QuickStarts](https://quickstarts.sigmacomputing.com/)
+ + +Be sure to check out all the latest developments at [Sigma's First Friday Feature page!](https://quickstarts.sigmacomputing.com/firstfridayfeatures/) +
+ +[
](https://twitter.com/sigmacomputing)
+[
](https://www.linkedin.com/company/sigmacomputing)
+[
](https://www.facebook.com/sigmacomputing)
+
+
+
+
\ No newline at end of file