Embed custom CSS into an Announcement – Apty Support

Announcements are the custom pop-ups designed to inform users about anything that needs their attention immediately or upon a schedule. In addition to displaying the essential information and using CTAs that assist users in carrying out certain tasks, Announcements may also include custom CSS to do the same. For instance, you can insert code snippets into your Announcement that helps to display a button that, when activated, translates the Announcement's content from English to Japanese. This is useful if you want to show information in your Announcement to specific users in Japanese.

To learn how to include a custom CSS while creating an Announcement,

1. Login to the Apty Studio after loading it on your web browser.

2. Click Select Application.

select

3. Choose your application from the list of applications to launch in your browser.

Note:

Ensure that you have added your applications to the Admin Portal before creating any content on it. To learn more, see Adding a New Application to the Admin Portal.
SFL is a default keyword created during the process of adding Salesforce to the Admin Portal.

4. Once the application opens, select Announcements on your Apty Studio.

select Announcements on Apty Studio.png

5. Select a Frame to start creating Announcements on your application page.

select frame.png

Note:

To learn more, see What are Frames?.

6. Click the + icon or Create New Announcement button.

create new announcement.png

Note:

If the Announcement already exists, you can edit it by selecting it from the list of Announcements on your Apty Studio.

select existing announcement.png

7. Enter the Announcement Name and description in the input fields.

name and description.png

8. Click the horizontal ellipsis on the text editor to view more options.

verticle ellipsis in text editor.png

9. Click the code symbol to embed your custom CSS into the Announcement.

code view symbol.png

10. In the Embed Content screen, paste the code snippet in the input field.

embed code.png

Note:

Check the Allow full screen mode box if you want the Announcement to be displayed in a Full screen mode.

allow full screen checkbox.png

11. Click Ok to save the embedded content.

Info:

A preview of the Announcement with the embedded content can be viewed live on screen.

12. Add the other details if required and then click Save. To learn more, see Create Announcements.

Once you create or modify the Announcement, you can make it accessible for your end users by publishing it either through the Admin Portal or the Apty Studio. For more information, see Publishing Apty Content(version 4.x or above).

Related articles