I end up on a lot of sales calls with current and potential customers who are looking to do one thing; embed Sigma into the applications. While a lot of that conversation leans technical, eventually someone from their product team will chime in and ask, “how can we be sure that Sigma looks and feels like our application when we embed?”
It’s an important question to consider. You can’t throw together random UIs into a single tool. It’ll confuse your customers and make your app less sticky. That’s not what I want as a solutions engineer and that’s definitely not what you want as a product manager or UI designer.
Thankfully, Sigma has a ton of levers to make sure what you embed and your application line up.
Workbook Themes
The first thing we’ll touch on is CSS styling. Everything you want to know about our workbook themes is covered in our documentation, but I’ll highlight here the core principles.
- Custom Fonts
- Custom Font Sizes
- Custom Colors
- Border Shapes
- Visualization Spacing
- Visible Cards
- Background Colors
Visualization Settings
Each Sigma Visualization has a variety of different components you can modify along with the workbook themes. These may include,
- Visualization colors (down to the bar/line)
- Font sizes
- Font weights
- Spacing
- Text Alignment
- Tooltips
- Titles
- Background
- Title
- X-axis
- Y-axis
- Legend
- Trellis
- Data Label
- Reference Marks
- Trend Lines
- Line Style
The possibilities for visualization editing largely depend on the visualization itself. A lot of these don’t make sense for a pivot table or gauge visualization, so don’t expect to see every one of these options in each visualization. Overall though, we have hundreds of customers embedding Sigma in their applications and our look & feel can align perfectly with what they’re going for. Just check out how one of our customers, Greenwich HR embeds Sigma in their application.
Advanced Look & Feel
As Sigma continues to grow our embedded offering, so does our ability to interact with Sigma visualizations and workbooks. A lot of our customers have specific UI design patterns they’d like Sigma to adhere too, but, at this time, we don’t offer pixel perfect reporting on every possible element.
Thankfully, there’s a solution for this, Sigma APIs with Javascript events.
If you have custom buttons, filters, or folder structures you want to leverage to allow your customers to navigate through Sigma as if it was your app, that’s no problem.
We have a brief example in our embedded demo, Plugs Portal (simply hit “Log-in”, no password required) and select the name of a Customer in the “Recent Orders" visualization. I’ll note, “Recent Orders” isn’t a Sigma visualization, it’s a custom visualization that interacts with Sigma.
This is important because it insures that even if you’ve spent time creating custom visualizations for your customers, you can still leverage them alongside the work you do in Sigma.