This QuickStart introduces you to Sigma Public Embedding and demonstrates how to embed Sigma content in a public website. This QuickStart assumes you have already taken the QuickStart Embedding 1: Prerequisites so that you have a sample environment to complete the tasks in this QuickStart.
Public Embedding allows you to present content outside of Sigma in a controlled manner for public consumption. This is a good option if you want to display an embed on a public facing website. Access to a public embed will not allow someone to access your data deeper in Sigma without a Sigma account for your organization and proper permissions. There is support for Workbook, Page or single Viz embeds.
Semi-technical users who will be aiding in the planning or implementation of Sigma with Embedding. No SQL or technical data skills are needed to do this QuickStart. It does assume some common computer skills like installing software, using Terminal, navigating folders and copy/paste operations.
The exercises in this QuickStart will discuss and walk you through the steps to embed Sigma content in a demonstration web application without security (ie: Public).
We will embed a Sigma Dashboard inside a Node.js web application. The final result will look like this:
(the index.html file)
and server-side (the server.js file)
code. Of course, customers may just embed the iframe directly as they see fit as there is no security involved.
This workflow provides a visual overview of the steps:
Log into Sigma and navigate to a Workbook you want to embed. It doesn't really matter what you choose and once you have completed your first embed, this portion of the process is very straightforward regardless of embedding an entire Workbook, Page or Viz.
We will use one of the pre-built Templates that are included in the Sigma Trial but the steps are the same regardless of what you choose to work with.
After logging into Sigma
, navigate to Templates
and click the Plugs Sales Sales Performance
example to open that Workbook.
Click Dismiss to exit the on-screen help.
A Workbook must be published to create or manage embeds. Click the Save As
button and give your Workbook any name you like. We called our Workbook Public Embed Dashboard
and clicked the Save button
. The Workbook is now Published.
We could continue to make edits but they will not show up later in the Public embed until they are again Published.
Click the caret (▼)
icon button to the right of the Workbook title in the header and select Embedding
:
This modal displays all available Public and Application embeds. Select the Public (0)
tab and then select Dashboard
. This will allow us to only display the Dashboard Page in our embed.
You will be presented with the required links to embed in your application. Copy both of the links and save them off to a text file. These are what you would normally provide to the Parent application developer but in this case, that is you.
This QuickStart will use a similar set of files as the Embedded Prerequisites QuickStart but with more configuration information in them to support the Public embed.
Download and unzip the project files to a suitable location of your choice that is easily accessible on your system. We placed it in a folder on the computer's desktop called sigma_public_embed
. The download is here. The zip file contains these two files.
Open server.js
in a text editor and paste the Public Link URL
you copied from Sigma as shown below, over-writing the value provided in the sample. Save the file
. It does not matter if you close the file or not at this point.
Open index.html
in a text editor and paste the Embed Code
you copied from Sigma as shown below, over-writing the entire line with the value provided in the sample. The Embed Code is not just the URL but rather the full iframe so don't just replace the URL. Save the file
. It does not matter if you close the file or not at this point.
You are now ready to start the Node.js Express web server. Use Terminal
and navigate to the Public folder
where you just modified the two files.
Run the command from the folder where you stored the unzipped download:
supervisor server.js
If you get an error about port 3000 being used already (not typically) you can change the port value in the server.js to use a different port.
Open your browser and navigate to http://localhost:3000
.
Notice that we only show the Dashboard since we decided to embed only that.
You should see the webpage with the title and the iframe embed below as show:
Changing the Parent Application embed is as easy as generating a new Public Link and Embed Code in Sigma, place those in the server.js and index.html, save the files and refresh the browser to see the results.
In this QuickStart we learned how to how to embed Sigma into a Public facing website.
Additional Resource Links
Help Center Home
Sigma Community
Sigma Blog