embedded code Archives

A Guide to Styling Embedded Modules in Your Website

by Jane | Oct 21, 2024 | onboarding

Your website’s visual appeal is crucial for capturing attention and keeping visitors engaged. With Roccai’s swipe module, you not only have a powerful decision-making tool at your disposal but also the ability to customize its visual layout to perfectly align with your brand’s unique style.

Let’s dive into the different styling options available and how you can create the perfect look for your site.

Explore a Variety of Customizable Styles

Create a section with two columns.
Set the background color to black or your preferred color.
- Left column: Add text and a button.
- Right column: Embed the module (see guide).
Round the corners of the container by 10px.

Create a section with two columns.
Set the background color to a gradient from (#336370) to (#7ab2c2) or your preferred colors.
- Right column: Add text and a button.
- Left column: Embed the module (see guide).
Round the corners of the container by 10px.

Create a section with two columns.
Set a background image for each column.
- Left column: Add text and a button.
- Right column: Embed the module (see guide).
Round the corners of the container by 10px.
Open the settings for the right column. Under Spacing, set the padding to 110px for both the top and bottom.

Create a section with 3 columns.
Change the section background to a gradient from white (#ffffff) to dark blue (#072130).
First column: Embed the module (see guide) and round the container corners to 30px.
Second column: Set a background color and round the corners with a 30px border. Add an image (drop), title, and text.
Third column: Set a background color, round the corners with a 30px border, and add a title, text, and button.

Create a section with two columns.
Yellow Circle:
- Click the grey + in the right column and add a Divider.
- Set the background color to #f6c85d.
- In Design > Sizing, set the width and height to 380px.
- Set the Border to 400px to create a rounded circle.
Field with dots:
- Add a transparent image with dots.
- Set Alignment to the left and Width to 34% in Sizing.
- In Spacing, set the right margin to 20%.
Circle Made of Dots:
- Click the grey + in the right column and add a Divider.
- In Sizing, set the width and height to 220px.
- Set the Border to 400px to round the corners.
- Adjust the border width to 6px, choose a color, and set the border style to Dotted.
Left column: Add text and a button.
Right column: Embed the module (see guide).
Round the container corners by 10px.

Whether your brand leans toward minimalism, bold designs, or custom flair, Roccai has a swipe module template to suit your needs.

Getting started

by Jane | Mar 27, 2024 | onboarding

This guide is designed to assist you in getting started with Roccai by using a product feed sourced from your website.

Step 1

The first thing you need to do is create a product feed in your website’s backend. A product feed is a structured file containing detailed information about a company’s products; you might know this from Google Shopping.

The format must be either .xml or JSON.

This is an example of what one item in a Google Shopping feed could look like.

The product feed must contain the following elements

id (required)
title (required)
subtitle
description (required)
imageUrl (required)
link (required)
tags
categories
price
sales price
status (in stock etc.)

The product feed should be a live link and updated in real time.

Shopify

If you use Shopify you can use this plugin (up to 100 products for free):
https://apps.shopify.com/product-feeds-generator-by-amasty?locale=da

Woocommerce

See this guide

Step 2

Sign in to app.roccai.com, and the onboarding will begin. Start by selecting a category and press NEXT.

Step 3

Now, it is time to select a name for your Swipe Journey. Then please choose a language (should be the same as in the product feed) and press CREATE MODULE.

Step 4

You then select Via Link and add your product feed. Press DETECT DATA. If you want to build the swipe journey manually, that is also possible.

Step 5

You can now check if you are satisfied with how your products are detected. You can see a preview to the right. Press NEXT.

Step 6a

Decide if you want all your products from the feed to be imported or only specific products. Press START IMPORTING

Step 6b

If you only want to import specific products, you simply have to select or remove tags. Press START IMPORTING

Step 7

Now, it is time to establish your style. Add your company colors and logo.

Step 8

This step is about the design of the swipe cards. To make it as fast as possible, please choose a template style for all your cards. You can use product images, where we pick images from your product feed, or upload background images. Press CREATE TEMPLATE.

Step 9

It is possible to make some design adjustments to the templates. It could be a frosted glass box, if the image should cover the screen etc.

Step 10

You can add more templates. This is mostly used if you don’t use product images but background images or colors.

Step 11

Add your first question if you want, or press SKIP FOR NOW.

Step 12

In a few moments, the system will be ready with suggestions for AI-generated questions. You will find them on the right side of the screen.

Step 13

You can now select the AI-generated questions that best suit your target audience. To do this, click on the questions and press ADD SWIPE CARDS

Step 14

Success! Now, you can try your swipe journey, share it, or customize your swipe cards.

Step 15

Adding a start, info, and a final card to the swipe journey is possible.

Step 16

Sharing the swiper journey as a link or embedded code is possible. Learn more about how to create campaigns here.

If you need our help, please contact us via the chat in the bottom right corner.