Inline Content Builder – Quick Start Guide

[1WSCGomez]

Step 1: Click the “Build Inline Content” tile

Step 2: Click the “Add Product” button

Step 3: Build SKU page

All of the following modules are optional.

Overview

1. Click the pencil icon to edit “New Inline Content”. This is your internal title for the portal. It will not be displayed in syndication.
2. Enter the title you want to see in syndication
3. Enter the text you want to see in syndication
4. Basic formatting options available*
5. Click the “Add Image” icon to add an image
6. When done, click “Apply”

*Our content inherits partner styling for a native look and feel

Images

Adding images

There are 3 ways to add images:

• Drag and Drop when using the same browser
• Copying/Pasting images URL
• Saving image to local drive and selecting “Choose Files” or using the Drag and Drop feature

Supported file types and size:

• .gif, .jpg, .jpeg, and .png
• Max size: 5 MB
• You can add up to 10 gallery images

Once you have uploaded your images, you can add alt/text or a description by clicking on the pencil icon. Clicking on the pencil icon is also how you would delete an image.

You can reorganize your gallery by hovering over each image and dragging it in the preferred order.

Videos

Adding videos

There are two ways to add videos:

• Saving video to local drive and selecting “Choose Files” or using Drag and Drop feature
• Using YouTube or hosted video URLs

Supported video file types and size:

• .mp4 (Recommended), .flv, YouTube
• Max size: 200 MB
• You can add up to 10 videos

Features

Adding features

The Features module is where the bulk of your marketing content will be built. You can create as many feature blocks as you would like.

There are nine different layout options:

• Media Left

• Media Right

• Text Only

• 2 Column

• 3-4 Column

• Media Only

• Overlay Right

• Overlay Center

• Overlay Left

Choose a layout to begin building content.

Note: Media can be images or videos. Uploading media functions the same way as the gallery module, and the video module.

1. Media Left

This module will display your chosen media on the left and text will be displayed on the right.

1. Click “Add Media” to upload your image or video file.
2. Add Title text
3. Add Text to the text box

Note: If the image is more than 400 pixels wide, the image will be converted to a 400-pixel thumbnail which will be clickable to its original size.

2. Media Right

This module will display text on the left and your chosen media on the right.

1. Click “Add Media” to upload your image or video file.
2. Add Title text
3. Add Text to the text box

Note: If the image is more than 400 pixels wide, the image will be converted to a 400-pixel thumbnail which will be clickable to its original size.

3. Text Only

This module will only display text which will span the width of the page. 

1. Add Title text
2. Add Text to the text box

4. 2 Column

This module will display two columns with text above your chosen media in each column.

1. Click “Add Media” to upload your image or video file.
2. Add Title text
3. Add Text to the text box

Repeat these steps in the second column.

5. 3 Column

This module will display three columns with text above your chosen media in each column.

1. Click “Add Media” to upload your image or video file.
2. Add Title text
3. Add Text to the text box

Repeat these steps in the second and third columns.

6. Media Only

This module will display media only. Click “Add Media” to upload your image or video.

Note: Banner images should be at least 700 pixels in width. If the original image is larger than 700 pixels it will be automatically resized to 700 pixels (width of page).

Features – Overlays

Overlays (Background with Text) allow you to add background images or colors to a feature block as well as add text and media over the background.

Steps for creating your Overlay:

1. Choose the text position that works best with the focal object of your background image.

2. Click “Background” to upload an image.

Notes:

• Images should be a minimum of 1024 pixels wide and should not exceed 2000 pixels in height.
• *Advanced settings are available however default settings are recommended.

3. Overlay Text and/or Add Media

Overlay Text is a text box that will be visible over the background image.

Additional Settings available include:

• Fill – sets the background fill color for your overlay text box
• Opacity – allows you to adjust the transparency of the overlay text box
• Text – sets the color of your text within the overlay text box
  • You can also override the color of specific text within the overlay, using the font color option

Media is used to upload an image or video that will be visible over the background image.

Allowed media formats include:

• (*.gif,*.jpg,*.jpeg,*.png); maximum size: 5MB
• (*.flv,*.mp4); maximum size: 200MB
• youtube

*Advanced Settings:

• Position – This sets the position (center, left, or right) of the background image and only is applicable if you choose Auto AND if the background image is small. 
• Repeat -If your background image is smaller than the width of the inline content, you can repeat the image. This is useful and only recommended when you want to use a gradient or pattern image.
  • No repeat – Image will not be repeated and will be shown only once. Default.
  • Tile – The background image will be repeated both vertically and horizontally.
  • Tile Horizontally – The background image will be repeated only horizontally.
  • Tile Vertically – The background image will be repeated only vertically.
• Attachment – This sets whether a background image is fixed or scrolls with the rest of the page.
  • Scroll – This ensures the background image stays within the feature block background. The background moves with the content and moves as the user scrolls down the page. Default. 
  • Fixed – The background image stays in the same location even as the user scrolls.
  • Local – Works similar to Scroll but can behave differently within embedded windows or frames. 
• Size – This controls the background image size and behavior based on the size of the feature block and responsive treatment.
  • Auto – Image will be sized automatically in accordance with the size of the text block submitted.
  • Cover – Default – Recommended. This ensures the background image covers the entire available width and height of the feature block.
  • Contain – This will reduce the background image to fit the feature block to see it in its entirety. 
• Background color -You also have the ability to set a background color if you do not want to use an image or behind the image when smaller than the feature block area. Use the color picker or enter your custom hex color code to set the background fill color of the feature block. Please note that you will need to adjust the Text overlay font colors so they contrast. 

Overlay Best Practices:

• Images should be a minimum of 1024 pixels wide to avoid tiling on most partner sites. To prevent tiling, set Repeat to “No repeat”.
• Images should not exceed 2000 pixels high.
• Adjust the Text overlay font colors so they contrast against the background image or color.

360 Spin

Adding 360 Spin

The 360 Spin module allows you to build a 360-degree view of your product.

We suggest having at least 12 sequential images to build your 360 spin although the portal will allow you to add up to 50 images.

There are 3 ways to add images:

• Drag and Drop when using the same browser
• Copying/Pasting images URL
• Saving image to local drive and selecting “Choose Files” or using the Drag and Drop feature

Supported file types and size:

• .gif, .jpg, .jpeg, and .png
• Max size: 5 MB
• You can add up to 10 gallery images

Additional Settings:

• Autospin Speed: This allows you to adjust how fast your product is spinning
• Stop the Spin: This allows you to set how long your product should spin for
• Reverse: This allows you to change the direction in which your product is spinning
• Clear All: This allows you to delete all of your images

Once you are done adding images and adjusting settings, click Apply.

Documents

Adding documents

You can add documents to your product page, such as:

• User manuals
• Brochures
• White papers
• Quick guides

There are 3 ways to add documents:

• Document URL
• From your local drive
• Drag and drop from local drive

Supported file types and size:

• .pdf
• Max size: 20MB
• You can add up to 10 documents

Note: These documents cannot contain MSRPs.

Hotspots

Adding Hotspots module

Hotspots are interactive icons placed over an image when clicked on display a callout highlighting key product features. Use any image of your choice and then enrich it with points of interest and in-depth information about the details depicted. The following are configurable:

• The number of hotspots
• The placement of each hotspot on the main image
• The associated popup content

Optional: Hotspot Product Links enables you to associate a Part Number within a hotspot callout.

Once a part number is successfully mapped, the hotspot callout on a Retailer’s product page shall display:

• ‘Product Title’ as available within the Retailer’s catalog
• Product titles linked to the respective product pages on the Retailer’s website
• ‘Price’ is available in the retailer’s catalog or on the Retailer’s website (if Dynamic Pricing is configured)
• ‘Add to Cart’ linked to the Retailer’s shopping cart page

To build a hotspot:

1. Click the Hotspot block icon
2. Drag and drop your main image that requires hotspots
3. Click and drag a hotspot icon to the desired location on the main image
4. In the numbered hotspot tab, add your image, video, title or text to the hotspot tooltip.
5. Add additional hotspot icons as needed.
6. Optional: Product Links
   • Under the Product Links section, enter the Manufacturer Part Number of the product you would like this product to be linked to. Then click on ‘Add Part #”
7. Click Save or Apply

Carousel

Adding Carousel module

1WorldSync’s Inline Content Builder allows you to create carousels enabling you to display more than one piece of content within a single block

Features

• Auto-play/Auto-scroll
• Touch Ready aka Mobile Friendly
• Navigation Arrows
• Dot navigation design
• Play/Pause options
• Accessibility and 508 Compliant!

Steps to build a Carousel

• Click the ‘Carousel’ module icon to add a new carousel block
• Select any one of the carousel-supported layouts for the first slide and click OK
• Add content for the first slide using existing drag and drop capabilities

• To add a second slide to your carousel, click on the green plus icon

• Repeat Steps 2 – 4 until you’ve added the required carousel slides

Best Practices

1. IMPORTANT: Do not build two carousel blocks one below the other as it may be distracting for the end-user (especially if auto-scroll is enabled).
2. For maximum user interaction, do not include more than 5 slides per carousel block.
3. When possible, always use navigation buttons and arrows to help users navigate within the carousel
4. Display the most important slide first in the carousel for maximum visibility and interaction
5. Use consistent image sizes across your slides to make sure the carousel is of uniform height
6. When possible, create your carousels in a way that takes the user through a journey

Product Q&A

Adding product Q&A block

1WorldSync’s Inline Content Builder provides you an easy to use user interface to build product FAQs that enable you as a brand to:

• Educate your shoppers and address their product-related FAQ by syndicating a Q&A block as part of your inline content.
• Establish trust by showing the shoppers that you understand the challenges they face and how you can help
• Improve customer service by answering common questions and save time and money by reducing the return rate of your products

Product Q&A Features

• Collapsible Accordion-style Product Q&A
• Support for all rich content layouts (not just text). Include imagery or videos to be more visual & descriptive in your answers!
  • Text Only
  • Media Left/Right with Text
  • Media only
  • Background Image/Video with Text overlay
• Simple & Intuitive interface for the FAQ builder
• Mobile-friendly

Steps to build an FAQ block

Click the ‘Product Q&A’ module icon to add a new FAQ block

Select one of the supported layouts for the first FAQ and click OK

If the “Text Only” layout was selected, enter the question in the Title field and provide the answer in the Text area section

Mandatory Fields

Irrespective of the chosen layout, the “Title” field is mandatory for all FAQs.

Click on the green plus icon on the left to add more FAQs

Repeat steps 2-4 and click Apply when you’ve added all the FAQs

Product Q&A Best Practices

Research what your shoppers really want to know and organize those questions and answers logically. This will create an overall better user experience.

Order your questions logically, starting with basic common questions and progressing to more complex issues.

Add images and videos to your FAQ page when appropriate. Sometimes visuals answer the question faster and more concisely than words.

Keep the FAQ section up-to-date, adding new questions as they arise and updating the answers to existing questions if necessary.

Do not include external links in your answers as they will navigate the shoppers away from the partner’s website.