Let's try it out!
| Scenario |
|---|
Eddie's Pet Depot is ready to switch out the Bird's Page ShoutOut we created for them in Builder I for something new. They'd instead like to call attention to their Subscription Treats Feature and direct the user to the Subscriptions area on the home page when the user clicks a button on the ShoutOut. They don't want to block the users' ability to engage with the site; they just want to display a notification telling users about the Subscription Treats Feature.  |
| Step 1: First, make sure you have the Subscription Treats Feature Tour Smart Walk-Thru |
|---|
You should have created this Smart Walk-Thru in Builder I. If you don't have the Smart Walk-Thru, you can create a dummy Smart Walk-Thru with a single step that points to the Subscription Treats section on the home page. Keep in mind that you will only be able to test the ShoutOut on the home page if you do not have the fully built out Smart Walk-Thru. We will connect to this Smart Walk-Thru from the ShoutOut's Action button later on.  |
| Step 2: Click the plus icon and choose ShoutOut |
|---|
There are two options in the App Menu, ShoutOut, which uses the new Visual Editor, and ShoutOut (Classic). This guide will focus on the new ShoutOut Dynamic Layout interface, so we'll choose ShoutOut. Then add a name for your ShoutOut, for this example, we'll call it Subscription Treats.  |
| Step 3: Select a Dynamic theme from the ShoutOut Theme Gallery |
|---|
We'll choose the Privacy Dynamic theme for this example.  |
| Step 4: Choose one of the corners of the screen for the position |
|---|
The Eddie's Depot team does not want the ShoutOut to prevent the user from navigating the site, so in the Canvas > Layout section we'll choose one of the corners of the screen for the position. ShoutOuts in the corner of the screen are also less likely to be immediately closed by the user. From the Canvas > Styling section, we will also disable the Overlay so the user can still navigate the site while the ShoutOut is displaying.  |
| Step 5: Adjust the ShoutOut text and Action button text |
|---|
Double click into each area to adjust the text. The menu on the right will allow you to customize the style of the text. The button's hover and clicked states will copy the default state's style when you adjust the default state. You can also replace any images to fit your design. If you'd like to replace the image for practice you can use this image link. The orange color from Eddie's site uses the hex code: #FF5F42 Try to use the skills you've learned in the lesson to match our example in the image.  |
| Step 6: Assign an Action to the Action Button |
|---|
Select the ShoutOut Action button on the ShoutOut itself, then in the menu on the right, open the Action section and choose an Action from the Button Action dropdown. For this example, we'll choose Smart Walk-Thru and select the Subscription Treats Feature Tour Smart Walk-Thru we created in Builder I.  |
| Step 7: Once your ShoutOut looks good and Actions are assigned, click Next to add Engagement rules |
|---|
Here you can set Auto Play frequency and when you want the ShoutOut to stop playing for users. Eddies Depot wants to promote the new Subscription Treats feature via the ShoutOut, so we will set it to play Once a Day. Considering that they also want to ensure users complete the Action, we'll set it to Cancel only when the user clicks the Action button. We'll also select Prevent this ShoutOut from appearing while Walk-Thrus or other ShoutOuts are in progress so we don't overload the user. Click Done and Save.  |
| Congrats! You've created a ShoutOut! |
|---|
| When you create a ShoutOut for your actual site and you're ready to deploy, make sure to publish your ShoutOut to your environment(s) in order for it to display to your users. |
