Quickstart

Basic steps to begin building your site in Experiences

❗️ XM is now called Experiences

Some of fabric’s products are undergoing name changes. XM is becoming Experiences, but you may see the old name in some places as we make the transition.

Create page

The Pages functionality in Experiences enables page-level content layout and editing for your site. Reusable components such as image carousels and rich text containers created by your developer can be quickly arranged, populated, saved and published.

Build a page

Launch Experiences from the Copilot application.

Select Pages in the left column and click the Add page button at the top of the page.

In the Page type drop down, select the option to best categorize this page.

For the Page name, enter something descriptive so it can easily be recognized in the list or searched.

Page version name should also be descriptive such as “Production V1” or “Winter promo 2021”.

The URL should be the name you want to see after your domain such as “/contact” or “/registration/terms”

After hitting the Save button you will be redirected to a new blank page.

NOTE: All these entries can be modified later if required.

🖼️

Populate the page

In the left column, click the Add components selection to see a list of component options. These choices will vary based on what your developers have created for your deployment.

🖼️

We will pick the As Seen In Component and begin populating the fields. As you add text and image content, it will appear in the preview window to the right.

Text can be entered manually or you can paste text copied from another source. Content will be automatically formatted and placed on the page per the design parameters of that component.

Images can be uploaded into Experiences for display from your desktop, or you can enter a link if your images are hosted at other public online locations.

🖼️

To preserve your edits, periodically click the Save button in the upper right corner. If you do not want to save the edits, click Sections or Back to all pages in the left column. If you want to make the page live for viewing, click the Publish button.

Configure metadata for SEO

Experiences provides a form to enter titles, descriptions and other metadata terms that will enhance the visibility of your pages to search engines. This data becomes part of the code (HTML) used to create the page but it is not displayed on the page to visitors.

Populate your metadata

Select Pages in the left column and mouse over the page you want to modify. Click the vertical ellipsis (⋮) to bring up the menu and select Edit details.

In the left panel of the Create Page modal box select SEO and metadata.

Enter your data in each field. The title and description should be unique for each page.

🖼️ SEO title is a few words that will appear in tab of a browser. Choose title text that reads naturally and effectively communicates the topic of the page’s content.

🖼️

SEO description is the brief description of the webpage that will appear on a search engine listing. Write a description that would both inform and interest users if they read it as a snippet in a search result.

🖼️

Metadata will be the name of a tag and the relevant content. You can add metadata by clicking the + sign. Examples.

Name	Content
keyword	content management
author	Bill Shakespeare

Select Save and to update the page settings.

This information can also be completed when building a new page.

Using the Rich Text Editor

Experiences contains a rich text editor component which can be used to stylize the text within a page or global element. It is accessed by clicking the pencil icon in the left panel.

🖼️

The rich text editor has standard capabilities for basic stylings such as bold, italic, underline, strikethrough, numbered list, and bulleted list. You can also indent and outdent text.

🖼️

Two advanced formatting features are available with predetermined styles for application to a block of text or inline. Each style is represented visually in the pulldown menu.

Block styles include italic title, subtitle and special container.

🖼️

Inline styles include marker, big and small text, typewriter, computer code, variable, deleted text, inserted text, cited work, inline quotation, and language RTL (right to left) and LTR (left to right).

🖼️

You can add elements such as HTML links to external pages and anchors to reference another part of the same page.

🖼️

Insert images, table and horizontal lines as desired. Clicking the Omega character will provide a menu with several special characters such as copyright symbols.

🖼️

You can adjust the alignment of content to left, center, right, and justified.

<🖼️

To view a larger canvas of text, click the maximize icon to expand the page to full size in the browser.

🖼️

Lastly, clicking the Source button will show you the HTML tags applied to your content. Styling is configured by the developers per your requirements to provide a consistent look throughout your site content.

🖼️

Creating templates

Experiences provides the ability to create templates by duplicating an existing page for reuse. This can be a blank page used as a form to populate with new content or a completed page with minor variants made to the content.

Multiple individual pages

These templates would be used for the same type of page, but each item is its own page on the site, such as blog articles or product pages.

Create Page Type

Creating a Template page type will enable categorizing pages into collections as well as easy organization and filtering in lists.

To add a new page type, click the Add page type button at the top of the page and complete the two fields in the modal box.

• Page type name - Descriptive text based on your site categorization such as Blog Template or Product Template.
• Prefix - Descriptive directory style name such as /blog or /product.

Page template

The initial templates will be created based on the components available on your deployment of Experiences. When creating a page to be duplicated for use as a template, you should include a description to indicate the use such as template - make a copy to use in the title. On the page itself, you can include instructions or placeholder text in the components as desired.

Create initial template

From the Experiences home screen click the vertical ellipsis (⋮) of the overall template (without clicking the dropdown to show versions) and select Make a copy.

In the dialog box, enter New page name (i.e. BBQ Chicken Recipe), URL, and click Save.

🖼️

Edit the new page

The new page will then show in the Experiences home screen with the same versions as the original template. You will then be able to select a version to Edit, and the page will have all the same components configured as the template as a starting point. The user will also be able to change/swap components for that specific page if desired

Variations of a single page

These templates would be used for pages that there are only one of, but would have different versions for various reasons, such as a homepage or header/footer content.

Create initial template

The initial templates will be created based on the components available on your deployment of Experiences. When creating a new version of a page for use as a template, you should include a description to indicate the use such as template - make a copy to use in the title. On the page itself, you can include instructions or placeholder text in the specific components to be modified in each version.

From the Experiences home screen, click the drop down of the page you wish to modify, select the vertical ellipsis (⋮) of the specific version to duplicate, and select Make a copy.

In the dialog box, enter Version name (i.e. Black Friday Homepage) and click Save.

🖼️

Edit the version

The new version will then show in dropdown of that page. You will then be able to select Edit, and the page will have all the same components configured as the original version as a starting point for the user to edit the content of. The user will also be able to change/swap components for that specific version if desired.

Other considerations for the templates

All components created will be available to use on any page across Experiences.

For all components, the users will work with fabric to assign what they want to be able to customize for each component (i.e. color, image, font, size, etc.).

The template functionalities can also be used across headers and footers as well (Global Elements).

Digital Asset Management

Experiences has integrated with a Digital Asset Manager (DAM) to make all your assets available while crafting content for your experiences. Note: This feature is only for DAM integrated customers.

Experiences renders these file formats.

• JPG/JPEG
• PNG
• GIF
• Webp
• TIFF
• SVG
• AI
• EPS

Add an asset

In a component that has an image attribute, click on the plus icon in the left column.

In the modal box, you will see thumbnails of the assets available in your DAM.🖼️

Filter assets

You can use the Sections and Label in your DAM to filter and quickly find specific assets you want to leverage. Both filters can be used at the same time to narrow down the results.

To use Sections to filter, click on the specific section button.

🖼️

To select a Label, click the dropdown and click on the specific label to filter.

🖼️

Add image to page using built-in integration

Once you select an image, you have the option to click View Image Detail on the left column navigation to review the metadata.

When you are ready to add the image to your Experiences page, click on the image and press the Save button.

🖼️

The image will appear as part of the component on your Experiences page. This example is a background for a page heading.

🖼️

Add image to page using an external source

To use assets from your own digital asset manager (DAM) or content distribution network (CDN) within the Experiences rich text editor, locate and select the asset you want to use.

Copy the URL for this asset, usually found in the Embed section.

In Experiences, open the rich text editor attribute for the component where you want to place this asset and click the Image icon.

🖼️

Paste the copied Embed URL into the URL field.

Add Alternate Text

NOTE: this is optional, but recommended for improved accessibility and SEO

The height and width will be defaulted to the image size. This can be adjusted by changing these values in the modal to fit the needs of your current content.

🖼️

Press OK to add the image and see it in both the rich text editor and overall page live preview.

🖼️