Dynamically adding CSS for dashboards integrated with SSO tokens

You can specify custom CSS when requesting a SSO authorization token for your end user, which will make sure that all dashboards integrated using this authorization token will add the specified CSS to the injected css defined in the dashboard itself. It's as simple as specifying the CSS with the css property of the SSO authorization request.

    curl https://api.luzmo.com/0.1.0/authorization  -H "Content-Type: application/json"
    {
      "action": "create",
      "key": "$LUZMO_API_KEY",
      "token": "$LUZMO_API_TOKEN",
      "version": "0.1.0",
      "properties": {
        "type": "sso",
        "username": "12345678",
        "suborganization": "Burrito Co.",
        "name": "SSO user",
        "email": "sso_user@luzmo.com",
        "expiry": "24 hours",
        "inactivity_interval": "10 minutes",
        "css": '< your custom css here. >'
      }
    }
	```

<aside>
	<b>Note:</b> to avoid issues, you should avoid specifying new line characters in the injected CSS. Instead, always minify your CSS before specifying it in the Authorization request! 
</aside>

Now, what can you achieve with this? Basically everything that is possible with CSS! We'll give you an example of how you can set images and text in your dashboard dynamically via a SSO authorization token.

### Override image and text in an integrated dashboard

You can override images dynamically by specifying the following CSS in the SSO authorization request:

```css
.image-inner-wrapper{background-image: url('< your image_url here >') !important;}

Keep in mind that the image url should be available to the user (i.e. publicly hosted)!

The previous code will replace all image widgets' internal images. If you'd like to override a specific image widget on your dashboard, you can use the following CSS if you replace <your_image_widget_id> with your image widget id:

#w<your_image_widget_id> .image-inner-wrapper{background-image: url('< your image_url here >') !important;}

You can also dynamically add text using CSS! The following snippet will add text to an empty text widget in your dashboard:

.editor-container.ql-editor:nth-child(1):after {content: '< your custom text here >' !important; font-size: 20px;}.editor-container.ql-editor {padding: 0px 24px !important;}

The final SSO authorization request would look like:

    curl https://api.luzmo.com/0.1.0/authorization  -H "Content-Type: application/json"
    {
      "action": "create",
      "key": "$LUZMO_API_KEY",
      "token": "$LUZMO_API_TOKEN",
      "version": "0.1.0",
      "properties": {
        "type": "sso",
        "username": "12345678",
        "suborganization": "Burrito Co.",
        "name": "SSO user",
        "email": "sso_user@luzmo.com",
        "expiry": "24 hours",
        "inactivity_interval": "10 minutes",
        "css": "#w<your_image_widget_id> .image-inner-wrapper{background-image: url('< your image_url here >') !important;}.editor-container.ql-editor:nth-child(1):after {content: '< your custom text here >' !important; font-size: 20px;}.editor-container.ql-editor {padding: 0px 24px !important;}"
      }
    }

This is how the dashboard looks like without specifying any CSS in the SSO authorization request:

And this is the result of a dashboard that is integrated with a SSO authorization token that contains the CSS code to add text and an image!