Configuring Qubit Aura

Once you have enabled Qubit Aura you can make changes to the look and feel of the mobile experience, including the color palette and image rendering, and you can also make changes to the default trigger and traffic allocation settings.

When you enable Qubit Aura for the first time, you will notice that the look and feel of the mobile experience is not tailored to your brand.

In it's out-of-the-box state, the color palette used for the header background, the font family and size, and how images are rendered on the page are all set with default values:

So, in this first part, we will take a look at how you can make changes to the mobile experience to align it with your brand. We will make changes to:

• The brand name displayed in the experience header
• The background and text colors used in the experience header
• How images are positioned on the mobile device
• The font-family and font-size used to display text on the mobile devices
• The Aura icon

These changes are done in the Configuration panel positioned on the left-hand side of the page. When you are finished making changes, make sure you select Save to commit your changes.

Select Aura from the side menu and then the Settings tab. Now select Edit in the Configuration panel

By default, the Aura header displays the following text: Discover more from. To this, you can must your brand name or similar.

Expand the Brand & language section and enter a value in Brand name. For this example, we will enter Fashion Shop as our value

Notice that when you enter a value, the visualization of the Aura experience is updated immediately:

By default, the header background color is white. The text color is dark grey.

Expand the Header section and select a color for Background color and Text color using 1 of the following methods:

Select inside the color swatch and use your machine's color controls to select a color

If you know the hex value for the color you wish to use, enter it in the field provided

By default, images are centered within the product panel:

You can change this behavior by expanding the Images section and then selecting either Fit or Fill

Let's look at the difference. We've already seen centered in the example above.

Fit

Fill

Let's briefly discuss the differences between center, fit, and fill.

• Center - Places 18px top and bottom margins around the image. The image height then expands to fill the rest of the available vertical space
• Fit removes those margins and allows the image height to expand to fill as much of the available vertical space
• Fill forces the image to fill up the available horizontal space

All these options retain the image aspect ratio.

Image background color

If you select Fit, you also have the option of defining a background color for the product panel, using 1 of the methods explained above:

By default, the font used for the mobile experience is Open Sans font-family: 'Open Sans' If necessary, you can define your own font to align Aura with your in-house brand style.

A focus on using custom fonts

The use of a custom font is typically a design choice, especially where consistency across touchpoints is important. You may use a custom font on your website and wish to use the same font for Aura for example.

Whatever the reason for using a custom font, you will need to implement the change in a way that your customers can also see the font you want to use.

We provide a method that allows you to import the font into your Aura stylesheet, thereby ensuring that even if your customer doesn't have the same font installed locally, they will still see it in Aura.

To use a Google font you will need the font URL and font-family for the selected font. As an example, we'll use the Mansalva font.

The base URL for all google fonts is https://fonts.googleapis.com/css. To this we simply append ?family=[family-name], e.g. https://fonts.googleapis.com/css?family=Mansalva.

You can additionally append one or more font weights to the URL, e.g. :400 :400,700 although not all fonts accept weight parameters.

To get a font family and weights, navigate to Google Fonts. Select against the font you want to use. Now select Family Selected in the bottom-right hand corner of the page.

In the EMBED tab, you can find the font family, in our example Mansalva

<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">

Now switch to the CUSTOMIZE tab, where you will find the available font weights, in our example font, only 400 is available:

Let's look at walking through our example from start to finish.

Expand the Font section in Aura and select Use custom font toggle. This will display your Aura stylesheet

Paste the following into a browser window https://fonts.googleapis.com/css?family=Mansalva:400. This gets the relevant CSS from the Google Fonts API

Copy the returned result into the Custom font editor. Have a look at our example:

@font-face {
  font-family: 'Mansalva';
  font-style: normal;
  font-weight: 400;
  src: local('Mansalva Regular'), local('Mansalva-Regular'), url(https://fonts.gstatic.com/s/mansalva/v1/aWB4m0aacbtDfvq5NKliKY_NdDBh.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Now add the font family to Font family and Header Font Family:

If necessary, change the default font size of 12px by making a selection from the Font size and Header Font size combo boxes

To finish up, select Save

By default, the icon used to launch Qubit Aura on a mobile device is . You can change the background icon color from the default and also change the rendering from 3D to flat.

Expand the Icon section

Select either 3D or Flat to change how the icon is rendered

Change the color used for the icon background using 1 of the methods explained above

By default, 50% of your users will be served the Aura experience, as the variation. This means that for those users, the Aura icon will be visible on the pages that it is triggered to display. The remaining 50% will not see the icon, and will continue to see your existing mobile experience as the control.

By default, for the 50% of your users that can see the Aura icon, the display of the Aura icon will be triggered on every page.

If necessary, you can change these defaults in the Advanced panel.

Triggers determine when and where the Aura icon is shown on your mobile site.

If no triggers are set, the icon will display on every page. Triggers only become relevant for an experience after traffic allocation rules have been applied.

For Qubit Aura, you can set the following triggers:

• Minimum number of pageviews before Aura shows - Only users with pageviews that exceed the defined value will be able to see the Aura icon. This setting is useful for clients that wish to hide the Aura icon on a landing page or to avoid clashes with page items such as cookie messages
• Exclude URLs that contain - You can hide the Aura icon on pages where it is not needed by adding a comma-separated list of strings. When a page is loaded, a check is performed against the list. If the string appears in the page URL, the Aura icon will be hidden
• Exclude URLs that match regex - Similar to the above setting, but the list of strings is converted to a regular expression (regex) and then checked against the URL. This setting is useful for hiding the Aura icon on pages that match elements of a URL, such as query parameters and anchors, e.g. /checkout?step=1

Select Aura from the side menu and then the Settings tab. Now select against Triggers in the Advanced panel

Make the necessary changes to the triggers by entering values in the displayed fields. When you are done, select Save

In the following example, the user has chosen to trigger the experience after 2 pageviews but not on pages with a URL that contains the string checkout or confirmation:

Traffic allocation determines the percentage of mobile users that will see the Aura icon on a page, as the experience variation, vs the percentage of users that will not see the icon, as the experience control. By default, 50% of mobile users will see the icon, but you can change this as necessary.

To help you decide what percentages to use for the variation and control, refer to Traffic Allocation Modes.

Select Aura from the side menu and then Settings. Now select against Traffic in the Advanced panel

Make the necessary changes to the triggers by entering values in the displayed fields. When you are done, select Save