The importance of branding
MindTouch Touchpoints allow you to connect your customers to your product documentation wherever they are in their online journey. From a marketing and user experience perspective, it is important to ensure these connections are as seamless as possible. With our Touchpoint branding functionality, you can match the look and feel of your Touchpoints with their surrounding product, e-commerce, or marketing sites.
- Styling your in-product contextual help to match your product's UI design.
- Branding your search Touchpoint on your marketing site to look like a native feature.
How to brand your Touchpoints
Before you get started, please note that you will require the following:
- Admin access to MindTouch
- Knowledge of CSS
- Knowledge of targetable elements used in Touchpoints
Step 1: Create your Touchpoints
- Navigate to your dashboard.
- Select the Touchpoints management page.
- Refer to the documentation for each individual to understand the use cases and functionality. Read about each Touchpoint type here.
- Select a Touchpoint to create.
- Fill out the necessary fields.
- Within the configuration fields, you will see a field for custom CSS. You don't have to fill this out yet.
- Save your Touchpoints.
Keep in mind to include a hostname where you are comfortable testing the Touchpoint. You will need an environment where you can embed the Touchpoint and see how the changes you make to branding affect its look and feel.
If you are looking to brand a Touchpoint that you've already deployed, we recommend that you create a separate Touchpoint first to test your branding. Once you have finalized that, simply copy and paste the CSS into the branding field of your deployed Touchpoint.
Step 2: Embed your Touchpoint as a test
- Copy your embed code for the Touchpoint and place it in your test environment. It should function as normal with no branding.
- Keep this environment and Touchpoint available as you go to the next step and build out your CSS branding.
Step 3: Create CSS to brand your Touchpoint
At this point, you will need to reference the targetable elements of Touchpoints. You can view the list here.
- Using your preferred text editor, write your branding CSS.
- When you are finished, go back to the Touchpoint you generated earlier in the management page.
- Edit the Touchpoint and paste the CSS into the custom CSS field.
- Hit save.
- Go back to your embedded Touchpoint and see how the CSS has affected your branding.
- If changes need to be made, repeat this process until you achieve the look and feel desired.
This may take some initial time and resource dedication to get the branding just right. However, once your initial branding is completed, you should be able to repurpose the CSS to other Touchpoints as well as account for slight branding changes your company might make in the future.
Step 4: Deploy your branded Touchpoint
Now that your Touchpoint is properly branded, it can be deployed as your use case requires.