The Welcome component displays onboarding information to guide the user through the set up process. This component must be the only component on its pane, as it fills the entire card. The component includes a button that links to a takeover for the onboarding content.

The Welcome dashboard component

Typically, you replace the Welcome component using the API, once any onboarding directed by the Welcome component has been completed.

Welcome Properties

The Welcome component type (type = welcome) uses the following properties:

Property Type Description Required?
headline ​String Text displayed in bold above the text yes
text ​String Text displayed below the headline. Max 160 characters. yes
action_label ​String Text displayed on the button. yes
action_link URL ​URL to the content that displays in the takeover when the button is clicked. Must be served over HTTPS. Can include a JWT token. yes

This image shows how the properties are used to display the Welcome component.

Here’s an example of the JSON to display the Welcome component shown in the above image.


"dashboard_cards": [
    {
        "name": "welcome",
        "version": "1.0.0",
        "label": "Welcome Component",
        "icon": "icon.svg",
        "link": "https://myurl.com:jwt",
        "default": [
            {
                "type": "welcome",
                "headline": "Welcome to My Cool App!",
                "text": "In just 2 minutes, you'll be ready to supercharge your website.",
                "action_label": "Get Started",
                "action_link": "https://myurl.com/manage:jwt"
            }
        ]
    }
]

Welcome Design Considerations

Keep the following in mind when using the Welcome component:

  • The Welcome component must be the only component on a card.
  • Typically, you’ll create the Welcome component as the default when you create your card in the manifest. When it’s time to display actual data, during an update you replace the Welcome component with other components.
  • Welcome components are great to use even after the user has configured your app, as they can encourage a user to take their first action when the card might otherwise be empty. For example, if a card would normally show a list of the user’s ad campaigns, a Welcome component can encourage the user to create their first campaign.

Help make these docs better!