Create an Engage Tool

Learn how to create an Engage Tool below.

Read Before You Begin

Read the following sections in blue before you create an Engage Tool.

Engage Tool Example

Once a user opens a Tool from the Engage Tool, they can easily switch between Tools depending on what they want to do. Their options are based on what you configure in the following instructions. In the image below you can see the Engage Tool on the Yawave website. Try it at yawave.com by clicking each of the icons.

Configure Engage Tool Settings

1. Click Tools/Engage Tools.

2. Click Create Engage Tool.

3. Enter a name you want to use for the new Engage Tool in the Name field. Note: This field has a 80 character limit.

4. The Touchpoint and Journey settings are optional and require more advanced understanding of the yawave product. If you are already familiar with these settings and how they work, complete the following, otherwise continue to Step 5.

   • Select Add Touchpoint from the drop-down menu.
   • Select a Journey from the drop-down menu or select Add Journey to create a new one.

5. Click Next.

Configure Engage Tool Theme

6. Under On Desktop select the style you want the Engage Tool to show for users on desktop by clicking a Style option. Your choices include Floating, Fixed, Inline, Expanding. Note: When choosing Expanding it gives users the option to expand or minimize the Engage Tool.

Below is an example of the Entage Tool's style and position. The Engage Tool in the example changes as you modify settings. Try several combinations to see what works best for you. Note: This example applies to all steps in this document.

7. Under On Desktop select the position you want the Engage Tool to show for users on desktop by clicking a Position option. Your choices include Left, Right, Hide.

8. Under On Mobile select the style you want the Engage Tool to show for users on desktop by clicking a Style option. Your choices include Floating, Fixed, Inline, Expanding. Note: When choosing Expanding it gives users the option to expand or minimize the Engage Tool.

9. Under On Mobile select the position you want the Engage Tool to show for users on desktop by clicking a Position option. Your choices include Bottom, Top, Hide.

10. Under Color Settings select the color you want to use for the Engage Tool background from the Background drop-down menu. Here you can enter a Hex value, RGB value or use the color picker.

11. Under Color Settings select the color you want to use for the Engage Tool icons and typography from the Icons, typography drop-down menu. Here you can enter a Hex value, RGB value or use the color picker.

12. If you selected Expanding for the Desktop Style or Mobile Style settings, you'll need to configure the Expand Button Color. Here you can enter a Hex value, RGB value or use the color picker.

The expand button is highlighted in the image below.

13. Click Next.

Configure Tools, Icons, Links to include in Engage Tool

14. Click Add Call to Action.

15. Select the Tool you want to add from the drop-down menu. Your choices include any of the supported yawave Tools. Continue reading for an example on adding a link to your Engage Tool.

16. The Tool name will change based on the Tool you selected in Step 15 above. In our example below we selected Share.

Using our example, select the Share Tool from the Share Tool drop-down menu. If a Tool is not shown in the drop-down menu, you will need to click Save, create one of the supported yawave Tools and then come back to this creen and select the Tool you created.

Enter the label name that will be shown under icon for the Share Tool in the Label field.

Note: When modifying the label and the icon (icon instructions shown in next step), you'll be able to see the changes in real-time as shown in the following image.

Use the default icon, select a pre-loaded icon from the icon drop-down menu or click Upload to upload a custom icon that you have created.

To add a link to your Engage Tool, select Other from the drop-down menu. Note: Click Add Tool as shown in Step 14 above to see the drop-down menu.

Enter the link to the page you want users to go to when they click the icon in the Link To field.

Enter the label you want to show on the Engage Tool in the Label field.

Use the default icon, select a pre-loaded icon from the icon drop-down menu or click Upload to upload a custom icon that you have created.

If you want the icon/link to open in a new tab in the user's browser, click the Open Link in new Tab toggle once to enable. Note: This only works with the Other Tool option (link/URL).

Repeat Steps 14, 15 and 16 until you have added all the Tools, Icons and Links you want to use for your new Engage Tool.

If you have added more than one Tool, you can click and drag the double arrow to the left of the Tool to move it up or down. Note: When you move a Tool up or down it changes the location on the Engage Tool.

To see settings for any of the Tools you've added, click the settings arrow.

17. Click Save.

Embed an Engage Tool on Your Website

1. Click Tools/Engage Tools.

2. Locate the Engage Tool you want to embed. Click the three dot menu to the right, located on the same row as your Engage Tool.

3. Select Embed.

4. By default the Engage Tool you selected in Steps 2-3 above will already be selected as the Engage Tool drop-down menu. The only way to change the Engage Tool is to select another Engage Tool using Steps 1-3 above.

5. Select the connection you want to use for this Engage Tool from the Connection drop-down menu. If a Connection is not showing, follow the Create a Connection First instructions above.

6. Select the Publication you want to use for this Engage Tool from the Publication drop-down menu. If a Publication is not showing, follow the Create a Publication First instructions above.

7. The Journey and Touchpoint settings are optional and require more advanced understanding of the Yawave product. If you are already familiar with these settings and how they work, complete the following, otherwise continue to Step 8.

   • Select a Journey from the drop-down menu or select Add Journey to create a new one.
   • Select Add Touchpoint from the drop-down menu.

8. Click Next.

9. You'll see the Theme settings again. What you adjust here will be specific to the embed code you create next. Make any adjustments now or leave as default. Note: You can also make adjustments at the code level.

10. Click Next.

11. Follow the instructions to copy and embed the Yawave generated code based on the configuration settings you chose in the steps above. Alternatively, we provide more detail below:

• For Step 1 in the onscreen instructions, click Copy Embed Code (a) and place the code in the head part of the website or application where you are embedding your Portal.
• Step 2a and Step 2b in the onscreen instructions give you two options. Click Copy Embed Code (b) if you want to use the settings you configured above or click Copy Embed Code (c) if you want to override what you configured above. Step 2b gives you more control. For example, you can manually change any of the embed code to the configuration settings you want. Place the code from Step 2a or Step 2b in the body of the website or application where you are embedding your Engage Tool.

10. When completed, click Done.