We’ve added a new node for Inpage and Chatbots to help highlight your products and services and also engage visitors better by using all the lovely imagery you’ll have at hand!
Don’t worry if you don’t have the images or even if you would prefer a text based slider type node, there’s a few different variations to choose from:
Text card – This allows you to use a carousel style picker with only text. It’s great for listing services and giving a little more detail about them.
Visual card – The visual excels when you’re trying to convey a product/service with a stunning image. But that’s not all, it can also be used for selecting locations and product selectors where you don’t need as much text.
Product card – With the product card you can add images and lots of product information. Great for listing product features and pricing.
Let’s get building!
Now you know what each type can do, let’s look at how to create your own carousel node. There are a few common options across all nodes, so let’s cover them first.
Question: Similar to a single or multiple choice node, you’ll need to start off with a question.
Single vs multiple choice: Allow users to select more than one option before continuing.
Card template: Choose between text, visual and product cards. You can swap this at any time, however it will remove all your current cards and start with a blank slate.
Number of cards: Choose the number of cards you’d like to display to your visitors.
Exit action: This is an option for users to not select any of the answers and move on. It’s great for adding an ‘I’m not sure’, or ‘Speak to a specialist’ call to action here.
Each textbox will perform in a similar way to the other nodes you’re used to in Leadoo, so you can add a send to URL option, labels and variables etc. Now we’ve covered the basics, we can move on to each card type. Starting with the text card
Building a Text Card Carousel Node
Once you’ve decided on the text card and how many cards you’d like to use, it’s time to add your content.
You’ll have two text boxes to use. Text #1 would be used as a header and Text #2 would be the subheader. In the example below we’re asking the visitor to choose which service they would like and we’ve used the text boxes to give the name of the feature and a brief description of what it does.
Once you’re happy with the cards you can then choose the next step in the customer’s journey.
Building a Visual Card Carousel Node
The visual card is very similar to the text card but now we can add some lovely imagery to help support the text. You’ll still have the header and subheader text boxes but you can either upload an image (recommend dimensions are 482x300px) or you can add a URL and it will pull in the image from there, this is a great option if your image is hosted online rather than as a file.
Building a Product Card Carousel Node
Moving on the product card is where things can get a bit more advanced because you have more text options to choose from to help give visitors more information about your product or service. In the example below we’re using the Leadoo pricing options to show you how it works.
Text #1: Great for displaying the product name.
Text #2: This could be used for listing the price or creating urgency by listing the amount left in stock.
Text #3: Can be used for additional information about the product, similar to a subheader
Text #4: Another area to add more product information.
Button: The main call to action, make this clear and compelling!
Not all of these fields are required, you only need Text #1 to create your product card.
Customising the look of your Carousel Node
You’ll have access to a robust style editor when creating your carousel node. Simply open up the style settings and click on the Card option to get started. From here you can edit every aspect of the card, including:
- Shape
- Background colour
- Navigational arrows
- Text colour and font
- Adding shadows and borders
Hope you found this useful and are now ready to start building your own carousel nodes! If you need any assistance please get in touch with your Account Manager!
