Dynamically adding CSS for dashboards integrated with embed tokens

You can specify custom CSS when requesting an embed 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 embed 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": "embed",
      "username": "12345678",
      "suborganization": "Burrito Co.",
      "name": "Embed user",
      "email": "embed_user@luzmo.com",
      "css": "< your custom css here. >",
      "access": {
        "collections":[
          {
            "id": "<a collection id>",
            "inheritRights": "use"
          }
        ]
      }
    }
}

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 an embed authorization token.

Override image and text in an integrated dashboard

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

.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 embed 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": "embed",
    "username": "12345678",
    "suborganization": "Burrito Co.",
    "name": "Embed user",
    "email": "embed_user@luzmo.com",
    "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;}",
    "access": {
      "collections":[
        {
          "id": "<a collection id>",
          "inheritRights": "use"
        }
      ]
    }
  }
}

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

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