A Guide to Styling Embedded Modules in Your Website

A Guide to Styling Embedded Modules in Your Website

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.

How to embed your product guide module to websites

How to embed your product guide module to websites

This guide will show you how to embed a swipe module on your website.

Step 1

Log in to Roccai and choose the module for which you want to create a campaign. Press the Share icon

Roccai share

Step 2

Click the code icon next to the campaign you want to embed.

Roccai embedding

It can look like this (the link in the script contains your specific swipe module information).

Step 3a – If you use WordPress

Log in to your website backend and find the page where you want to embed the swipe module. Add a code block and add the script here.

Then add the id roccai-container to the CSS ID field in the code block settings.

Roccai embedding

You can now style the size of the swipe module container. We recommend the following:

This image has an empty alt attribute; its file name is Screenshot-2023-06-29-at-11.06.57-1024x903.png
OBS: The embedded swipe module will be visible in the preview; it will not be visible in edit mode.

Step 3b – If you use Simplero

Log in to your website backend and find the page where you want to embed the swipe module. When adding a script on a Site or Landing Page, you’ll be able to add a Script section.

Copy the script

and add it inside the script section:

Copy the container ID:

Click the HTML button located in the upper right corner of the toolbar, the last button the looks like “< >

The Source code screen will open. Paste the embedded code where you want it and click the blue Ok button when done:

Step 3c – If you use Shopify

Log in to your website backend and find the page where you want to embed the swipe module. When adding a script on a Site or Landing Page, you’ll be able to add a Liquid section.

In the Liquid-code field add both the script and the container ID

You view will still look blank but if you save and preview the page, it will load on the screen.
You can style the module as you want by changing the styling in the container. style=”width:100%;height:600px” this tell that it should take up 100% of the width and 600px in the height.

Step 3d – If you add to code

Copy the script and add it inside the <head>

Copy the container ID and add it inside the <body> where you want the swipe module to be displayed.

If you need our help, don’t hesitate to get in touch with us via the chat in the bottom right corner.

How to create a campaign

How to create a campaign

This is a guide to help you create a campaign for your swipe modules. This means you can collect data from different channels, such as your website, newsletters, Social Media, etc.

Step 1

Log in to app.roccai.com and choose the module you want to create a campaign for. Press the Share icon.

How to create a campaign

Step 2

To create a campaign, press this button.

How to create a campaign

Step 3

Now you can add the information needed to set up the campaign and press Create Link. Clik the question icons if you need elaboration.

How to create a campaign

Step 4

Copy the link or the embedding code and add it to the channel. See how to embed a swipe module on your website here.

How to create a campaign

If you need our help, don’t hesitate to get in touch with us via the chat bottom right corner.