If any popular app is often mentioned in the context of a great user experience and onboarding new users, it's Slack. Get inspired by their onboarding process, customize the look and feel of your Usetiful product tour and recreate step by step Slack's welcome message.


How Slack welcomes new users?


After creating your company space, the following welcome message will appear, linking to the channel you just created. Once you clicked on the "Let's Go" button, you can start typing your message right away.




How to recreate this in Usetiful?

  1. Firstly, create a new theme that will apply Slack's brand style.

  2. Update the following theme properties:
    Colors:
    - Primary color: #611f69
    - Primary color hover: #4a154b
    - Progress bar color: #611f69
    Typography:
    - Content font size: 16px
    - Buttons font size: 18px
    Custom CSS:
    - Paste the following custom CSS to increase rounder corners in bubbles, increase space between lines, and make the font in buttons bolder.

    .#{$classNamePrefix}-modal, .#{$classNamePrefix}-bubble {width: auto; border-radius: 14px}

    .#{$classNamePrefix}-content, .#{$classNamePrefix}-bubble-content{ line-height: 24px}

    .#{$classNamePrefix}-actions .#{$classNamePrefix}-button { font-weight: bold }



    The result should look something like this:


  3. Click on the "Create" button to save your theme.

  4. Create a new product tour, assign your theme and create the content of the welcome step. You can hide the default title and the progress bar by changing the tour and step settings.


    Our content editor allows you to change the source code of each step. For example, you can easily set a background image for the step or limit paragraph maximum width so the text is easy to read. 


    Here is the code we used for our example. You can easily copy and paste it into your experiment but don't be afraid to create content that will better fit your app.

    <div style="min-width: 500px; background-image: url('https://cdn.usetiful.com/prod/2474/slack-bg-60ba1f61221df.png'); background-size: contain; background-repeat: no-repeat;"><p style="text-align: center;"><strong><span style="font-size: 18pt;">Meet <a href="#">#user-oboarding</a>, your <br />team's first channel<br /></span></strong></p>
    <p style="text-align: center; max-width: 400px; margin: auto;"><br />Channels keep your work focused, by giving <br />each topic, project, or team its own space.</p>
    </div>

    Once you finished work on the content, don't forget to choose an element selector this bubble will be pointing to in your app.

  5. Preview your tour. You can preview this directly in your app using our browser extension.