Solved

Specific colors for specific words

  • 29 August 2023
  • 2 replies
  • 37 views
C

Hi everyone !

 

I’m creating an inapp message for a broadcast to announce a new feature and I had a question.

How can I assign specific colors to specific words in my title for example : 

Title : Introducing new feature 

I want introducing to be in black color and new feature to be in gold color.

Currently my component looks like this :


                "components": [
                  {
                    "gist": {
                      "designer": true,
                      "id": "***********************"
                    },
                    "type": "textWidget",
                    "color": "Blue Navy",
                    "text": "Introducing new feature",
                    "style": "Heading Large",
                    "textAlign": "center"
                  }
                ]

If anyone has any clue it would be great.

Thanks ! 

icon

Best answer by Byron 29 August 2023, 22:37

View original

2 replies

B
Userlevel 2

Hi there,

I don’t think there is currently a way to change text color within the same text component, but I did find a way to workaround it using multiple text components that might work for you.

 

This is a basic example that uses a block with three separate text components so that I can control the text color of individual pieces of text.

First, you’ll want to navigate to the branding section of the in-app message builder and create a new text color with the gold color selected so it’s available in the editor: https://customer.io/docs/journeys/in-app-getting-started/#branding.

Next, create a block with multiple text components. From what you described, you should be able to use two text components, one for each color.

 

Here’s the basic structure (I used three text components).

 

 

 

Here’s the basic settings, notice how I split the text and selected each color.

 

Here’s the preview.

 

 

 

C

Thank you so much for your help !

Reply


Terms & ConditionsCookie settings
Product
Resources
Industry
Company

Privacy PolicyTerms of ServiceStatus© Peaberry Software, Inc.