Skip to main content
Solved

Specific colors for specific words

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 ! 

Best answer by Byron

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.

 

 

 

View original
Did this topic help you find an answer to your question?

2 replies

Byron
  • Byron
  • 69 replies
  • Answer
  • August 29, 2023

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
1 person likes this
  • C
    caps_j
C
  • caps_j
  • Author
  • Novice
  • 1 reply
  • August 30, 2023

Thank you so much for your help !

Reply


Most helpful members this week

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings
Product
Resources
Industry
Company

Privacy PolicyTerms of ServiceStatus© Peaberry Software, Inc.

Terms & ConditionsCookie settings