Create an App

To add an App to your site, you must first create an App in Livefyre Studio.

To create a new App:

1. Click +New App from the Apps page, and select an App type from the pulldown menu.
2. The New App dialog box appears. Enter an App Title, select a Site, and click Create to open the App Overview page.

The App Summary page provides 4 tabs:

• App Summary: provides an overview of the App’s content and status, and provides tools to access the App on its site and generate its embed code.
• Designer: allows you to select design options for the App, including fonts, color schemes, and App specific configuration options.
• Streams: lists all Stream sources for the App’s content. Click the Stream’s title to open the Stream Details page, from which it may be edited.
• Settings: allows you to select App specific settings, including rules for adding content to the App, and the types of content to display. Click the Settings tab to override the Network and Site Settings for the App.

Apps List

The Apps list page provides access to all of your existing Livefyre Apps.

The Apps list page displays the following information:

• Title: Lists your App’s title, and includes an icon indicating the App type.
• Site: Lists the App’s location, by site.
• Content Count: Lists the number of pieces of content published to the App.
• Date Modified: Lists the last time the App was changed in App Designer.
• Embed Code (</>): Click the icon to generate the embed code for your App.

App Customization

You can use the App Designer tab to select Style and Configuration options to customize your Apps.

Style Options are consistent across all App types; Configuration Options vary by App. The bottom of the Style and Configuration pane lists the Livefyre App version for your App.

Select Style Options

Style Apps to fit your site’s branding. Use the Style options to select the App’s color and font styles.

• Theme. Select Light or Dark to define the background color for your displayed content. Changes made to this setting will be immediately reflected in the preview to the right. This setting controls background, content text, user handle, timestamp, share button, and social icon color selection for the App.

• Brand color. Select a color for your App. This color will be used for hashtags, URLs, usernames, @mentions, bar charts, and other App-specific components, as displayed in the preview pane to the right.

• Font family. Select a font for user generated content in your App. Selecting Georgia or Times New Roman will assign that font to content, and Helvetica Neue to usernames and display names. Selecting Helvetica, Verdana, or Trebuchet will assign those fonts to content, usernames, and display names.

• Font size. Select a default font size. This setting will affect all user generated content and titles displayed in the App.

Updating Apps

If a newer version of the App exists, an Update button displays.

Click the button to update to the newest release version. Refresh your App to use all available feature enhancements and bug fixes. Once updated, preview changes made to your App (if any), then accept or reject the update.

Add a Call-to-action Button to an App

Add a Call-to-action button to drive conversion from UGC.

To add a Call-to-action button to an App:

1. Create a Mosaic or Media Wall App.

   For information on the customizations available in a Mosaic or Media wall, see Mosaic Customizations or Media Wall Customizations.

2. Open the Designer for the App.

3. Scroll to the Call-to-Action Button section in the Designer.

4. Switch Call-to-Action Button to on.

5. Configure the Call-to-Action button options.

App Previews

App Designer allows you to preview your App in multiple delivery formats, and with your own or sample data displayed.

Select Exit Preview to return to design mode.

Preview Mode offers the following options:

• Preview Options: Use the pulldown menu to select a preview format (mobile, tablet, or desktop) and whether to show Sample Data or the App’s Stream data.

  NOTE

  If you deselect Sample Data, and no Stream is enabled for the App, no content displays in Preview Mode.

• Share: Opens the App in a new browser tab, and generates a URL, which may be used to allow friends, colleagues, or non-Studio users to review your App, and test it in different browsers and devices.

  NOTE

  Any content posted to a review version of your App will be added to the App. If you do not wish this content to appear in your published App, you must delete it before clicking Publish.

• Exit Preview: Returns you to edit mode.

App Publishing

App Designer automatically saves your App after you make a change. You can use Publish to generate an embed code, or to update any previously published versions of this App with the current version.

Review App History

App Designer automatically saves your App after you make a change and generates a new version for each change. You can use History to open a panel listing all versions of your App. Listed versions will show each version’s editor and its age.

To review App history:

1. Click on a version to select it.
2. Refresh the preview display.
3. Click Restore Version to clone the selected version and work from it.
4. Click the back button in Version History to revert to your working draft.
5. Click Share to generate a URL for the preview.

If another editor makes changes while your browser window is open, Livefyre issues a warning message when you try to edit the App, asking if you wish to return to your (older) draft version. (This prevents multiple simultaneous editors from accidentally ignoring each other’s changes.) Click Update to Latest to begin working from the latest version. Click Overwrite to return to your (older) working state, increment the version number from the most recent, and continue working.

App Summary Tab

Use the App Summary tab to manage information for individual Apps.

The App Summary tab allows you to:

• See on Site: Opens the App on your site.

• Embed code: Available only for published Apps, provides a clickable link to generate the embed code for any published App.

  NOTE

  Use this embed code to add Polls to your Comments or Live Blog App. For more information, see Custom Interactions > Custom HTML.

• View Content: Opens the Content page, which lists all content published to your App.

• Moderate: Opens ModQ, listing all content awaiting moderation for the App.

• Developer Info: Provides the App’s Collection ID, Article ID, and Site ID.

Embed an App on your Site Using Studio

Generate the Embed Code.

When an App is published, Livefyre generates and displays an embed code, which may be used to embed the App on any page in your Network. To regenerate the HTML snippet used to embed your App on a page:

1. From the App Overview screen, click the </> Embed Code button.

2. From the Embed Code panel that opens, copy and paste the HTML code snippet displayed into your web page.

   For Apps requiring user authentication, your integration for user auth must be complete and located on the page before adding the embed code.

Delete an App

You can delete an App from the Apps list in Livefyre Studio. When you delete the App from Studio, the App is hidden from view, it does not delete or stop:

• The App from continuing to work on a site.
• Associated streams.
• Associated collections in Livefyre.

To delete an App:

1. Click Apps.
2. Click on the ellipsis to the right of the name of the App to delete.
3. Click Delete App to delete the App.