Artwork by Matt Rae
When designing websites, there are many interactive elements, and supporting experiences that should be considered, prototyped and tested to ensure a cohesive overall experience for customers.
In this guide you’ll learn how to leverage Auto-Animate and component states in Adobe XD to create an interactive chat modal widget that pops up when activated. This type of web pop up can be helpful for websites that offer online support, or allow customers to book directly with an agent online, like a travel website.
To follow along, download Adobe XD, and open this starter file.
Setting up the elements
The provided starter file includes several elements to help you get started. For the purposes of this guide you’ll be creating a chat window on top of a fictional website for an adventure travel destination. The homepage design is provided as this is where the chat button will be embedded.
The modal itself will include several component elements nested together to form the final product. These elements are the chat button used to trigger the opening of the chat modal; a component for the chat window itself; a component for the chat content (this will include a scrolling section that will be embedded into the chat window); and finally a component for the message entry and submit button.
Creating the chat button
The first element to be created is the button that will float at the bottom of the page and trigger the chat window to expand open when clicked. The button itself can be simple, utilizing just text or an icon, but in this example the button will include an icon and text to add clarity to the action.
The various button elements have been provided in the starter file. Start by positioning the chat icon and the text box that says Chat with us on top of the dark button background. Next, group the icon and the text box into a group called Button Label. In the Properties Inspector on the right, enable Stack. Enabling a stack will allow these elements to be rearranged, and allow you to easily adjust spacing between them.
Next, with the inner content aligned properly in the button, group it with the background, and call this group Chat button. Turn on Padding this time to ensure that as the text value changes, the padding around the button will remain consistent.
Next, this button can be converted into a component and a hover state created. Use the right click menu and select Make Component to convert the selected group to a component. To add a hover state, click on the + button in the component menu and select Hover State to add a pre-linked hover state. Finally, style the hover state to the desired appearance. In this case, the button will have a slight rotation, a background color change, and the icon will fill in when hovered.
Finally, with Default State selected again, create an additional state using the New State option. Call this state Expanded, as it will be used for when the chat modal is open. The chat button is now complete for the time being, as the other components need to be created before returning to the button.
Design the scrolling chat section
The next step is to set up the scrolling section where the chat itself will take place. This element will be placed in the pop up modal to be designed in the next step.
Provided in the starter file are two components, one for the support agent’s chat bubble, and another for the guest submitting the request. In practice these could be combined as states in a single component, however for clarity they have been separated as two individual components in this tutorial.
Start by using the text tool to add a timestamp to the top of the section (this can also be done by copying and pasting the opening hours text, and changing the color and value). Next, drag a copy of the support agent chat component onto the screen and override the text to provide a welcome message to the chat. This component is set up with padding so the bubble will resize with the message. You can adjust the size of the bubble by modifying the size of the text box.
Next, drag in an instance of the guest message bubble component and align it to the right of the screen using the rightmost guide. In this step you’re simply populating the chat with elements, and will later adjust states, and what is shown once all components are compiled into the main component.
Add a few additional bubbles, and build out the end state of the conversation. To ensure that the background resizes as the text grows, place the text bubbles into a Stack and then group the stack and the background and enable Padding. This will ensure that as the conversation grows, the background will resize.
Finally, since the chat window is going to be cropped in the next step, convert it to a component to ensure you can always access the full length of the component for making edits later on.
Design the chat modal background
In the starter file, a basic modal frame has been included. The modal frame will contain the header, including a logo of the website, a close button, a banner for important messages, and blank space where additional elements can be placed.
The next step to setting up the modal frame, is to drag an instance of the Text entry component onto the bottom section of the window frame. Using alignment controls you can ensure it is flush to the edge and bottom of the window.
Finally, drag in an instance of the conversation component created in the last step, and place it in the vacant space between the header and footer. Don’t worry if the new element overhangs, as you can apply a vertical scroll group and set the viewport top and bottom by dragging the blue handles into the desired position. For added effect, ensure this element is placed below the header and text entry component in the layer stack.
With this element assembled, once again group all the elements and select Make Component from the right click menu, name it Chat Modal. To make things easier later on, leave the Default State as the expanded state like so. Using other states, the various stages of the process can be created.
Prototyping interactions
Create the modal states
To begin creating interactions, you must first define the various states on the component. Starting with the Chat Modal component, states will be created for when it is collapsed and invisible, open with a welcome message, and when a guest has sent the first message. Additional states can be created as well to simulate a longer conversational experience, but the process is the same.
First, with the Main Component selected, click on the + in the component menu to add a New State. Name this state Collapsed, and edit the modal accordingly. In this case, using Responsive Resize, the modal will be resized down, opacity reduced, and then hidden in the layers panel. This will prevent it from adding to the touch target in the prototype.
Next, create another new state, this time for the typing state. Name the state accordingly, and double click into the chat window component, modifying the guest bubble state to typing, and the input field to the active state as well. Having pre-configured states in your nested components makes it easier to move faster when prototyping like this. Finally, states for sending the message, and the message sent will be created as well.
Connect the chat modal interactions
With all the required states now set up, they can be connected together. Just like state creation, ensure this is being done on the main component itself, or else it will only apply to that singular instance.
Start by setting a Tap trigger on the input field, and connecting it with Auto-Animate as the action to the Typing state. From the Typing state, set a Tap trigger from the send button to the Message sent state using the same parameters.
This will complete the interactivity stored on the chat modal itself. To pull everything together, the chat window must now be combined into the expanded state of the chat button that was created in the first step.
Opening and closing the chat modal design
The final steps are to include the new chat window within the button design that was created in the first step. To do this, you’ll make use of the collapsed and default states of the chat window.
Start by selecting the Main Component of the chat button. Ensure that Default State is selected, and double click into the component. In this case it is helpful to group all the button elements so that the menu can be pasted outside of the padding.
Position an instance of the Chat Modal component it should go, and then toggle it to the Collapsed state. Cut then paste the modal into the button component, but outside the newly formed group (do this by selecting the new group, and not the internal elements).
Since the menu was toggled to Collapsed in the Default State, it will show that way in the others as well, which is fine for the Hover. But in the Expanded State you’ll want to toggle it back to the Default State so that it displays as opened. The last step is to ensure that all but the first chat bubbles are hidden, and that can be done just using opacity.
Finally, add a Tap interaction with Auto-Animate to both the default and hover states of the button that links to the expanded state of the button. You should now have a fully interactive chat modal to reuse across your design. Simply drag the component, place it on the web design and set it to Fix Position When Scrolling.
Leveraging Auto-Animate and component states like this you can create multiple interactions that remain stored within a component. Now that this component is connected, it can easily be reused across designs for creating different chat modal design experiences without the need to redesign it everytime.
