# Url Composer Templates

**URL:** https://meta.discourse.org/t/url-composer-templates/389546
**Category:** Theme component
**Created:** [November 24, 2025, 11:49pm UTC](https://meta.discourse.org/t/url-composer-templates/389546 "2025-11-24T23:49:22Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [November 24, 2025, 11:49pm UTC](https://meta.discourse.org/t/url-composer-templates/389546/1 "2025-11-24T23:49:22Z")

</div>

There’s been a lot of discussions about having composer templates for tags. That didn’t work in my use-case so i built this instead. It can be used for that at a push, modified slightly to work for tags too, or if you add something to your discourse that modifies the url to trigger the templates where you want them.

This sniffs the url and puts a template in the composer anytime it finds it. So you could put `developers` in and that would show any time the tag developers is used.

You’d normally want to be more specific though and use `tag/developers` or an intersection like `/tags/intersection/developers/pineapple`

You can use it for categories like `c/general` which would recreate and override the categories template option, so you could get creative and use it as a conditional template in a category.

You can use it on only the 1st post, only replies, or all posts in a thread:

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/4/d74c7244e15d567a81825d2b3dc343b3c856558c.png)

You can have the template text appear:

- only if there’s no topics/threads at that location yet
- all the time

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/e/5/6e52b17f5053d8d2d5b3256e11408613bc49aca3.png)

To-do: only put a template in if the user visiting hasn’t posted a topic at that location, even if others have. Sadly i ran into difficulties with this and ran out of time for this functionality, for now.

Install this theme component

**Github** : [GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found · GitHub](https://github.com/focallocal/url-composer-templates)

# URL Composer Templates

A Discourse theme component that pre-fills the composer with template text based on URL parameters. Designed to work seamlessly with Docuss to provide context-specific templates for different types of interactions.

## Features

- **URL Parameter Support** : Automatically detects `?composer_template=X` in URLs and applies the corresponding template
- **Multiple Template Types** : Configure up to 6 different templates for different purposes (report, going, invite, custom templates)
- **Auto-Open Composer** : Optionally auto-opens the composer when visiting a Docuss link with no existing threads
- **Flexible Application** : Templates can apply to first post only, all replies, or both
- **Session Persistence** : Uses sessionStorage to maintain template selection across page navigations
- **Debug Mode** : Enable detailed console logging to troubleshoot template application

## Installation

1. **Install the theme component on Discourse:**

2. **No plugin rebuild required!** The `composer_template` parameter support already exists in dcs-discourse-plugin and dcs-client.

3. **Deploy your React app (fl-maps)** with the updated DCSLink components that pass the `composerTemplate` prop.

4. **Configure templates** in the component settings (Admin → Customize → Themes → your theme → url-composer-templates → Settings).

## Configuration

### Template Settings

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/2/b/52ba54c7e4d47a76514538fd88d4ff252a551f5f.png)

Each template has three configuration options:

#### Template 1 (Report)

- **template\_1\_id** : `report` - The URL parameter value to trigger this template
- **template\_1\_text** : The text to pre-fill in the composer
- **template\_1\_use\_for** : `first_post` - Apply only when creating new topics

#### Template 2 (Going)

- **template\_2\_id** : `going` - For “I’m going” type interactions
- **template\_2\_text** : Pre-filled text for going confirmations
- **template\_2\_use\_for** : `all_replies` - Apply to all replies (not first posts)

#### Template 3 (Invite)

- **template\_3\_id** : `invite` - For invitation interactions
- **template\_3\_text** : Pre-filled text for invitations
- **template\_3\_use\_for** : `all_replies` - Apply to all replies

#### Templates 4-6 (Custom)

- Disabled by default
- Can be enabled and customized for specific use cases
- Configure ID, text, and application scope as needed

### Auto-Open Settings

- **enable\_auto\_open\_composer** : `true` - When enabled, automatically opens the composer if:
  - A Docuss link is clicked (URL contains `?composer_template=X`)
  - No threads exist yet for that tag combination
  - Helps users start discussions immediately

### Debug Mode

- **debug\_mode** : `false` - Enable to see detailed console logs with emoji prefixes:
  - 🎨 Template application logs
  - 🚀 Auto-open composer logs

## Docuss Integration

### Automatic Integration

The url-composer-templates component is designed to work automatically with Docuss. When you have both:

- This component installed on your Discourse instance
- The updated Docuss client and plugin (with composer\_template support)

Templates will be automatically applied based on:

1. **Interact Mode** :
  - `DISCUSS` mode → Uses triggerId hints (going, invite) or defaults to `report`
  - `COMMENT` mode → Uses `report` template

### Custom Templates via HTML Attributes

For more precise control, you can specify templates directly in your HTML using the `data-dcs-composer-template` attribute:

```html
<!-- Example: Report button -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  Report an Issue
</div>

<!-- Example: Going button -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  I'm Going!
</div>

<!-- Example: Invite button -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  Invite Friends
</div>

<!-- Example: Custom template -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  Give Feedback
</div>

```

### Template ID Matching

The component matches template IDs from the URL parameter with the configured template IDs:

| URL Parameter | Template Setting | Default Purpose |
| --- | --- | --- |
| `?composer_template=report` | `template_1_id` | Bug reports, issues |
| `?composer_template=going` | `template_2_id` | Event RSVPs |
| `?composer_template=invite` | `template_3_id` | Invitations |
| `?composer_template=custom1` | `template_4_id` | Custom use |
| `?composer_template=custom2` | `template_5_id` | Custom use |
| `?composer_template=custom3` | `template_6_id` | Custom use |

## How It Works

### Template Application Flow

1. **URL Detection** : When a user navigates to a URL with `?composer_template=X`, the component stores the template ID in sessionStorage
2. **Composer Interception** : When the composer opens, the component checks for a stored template ID
3. **Template Matching** : Finds the matching template based on ID
4. **Scope Validation** : Checks if the template should apply (first post, reply, or both)
5. **Text Insertion** : Pre-fills the composer with the template text
6. **Cleanup** : Marks the template as applied to prevent re-application

### Auto-Open Flow

1. **Parameter Detection** : Checks if URL contains `?composer_template=X` and auto-open is enabled
2. **Topic Search** : Searches for existing topics with the current tag combination
3. **Composer Opening** : If no topics found, automatically opens the composer
4. **Template Application** : The template is then applied via the normal flow above

## Example Use Cases

### Event Website

```yaml
# settings.yml
template_2_id: "going"
template_2_text: "I'm planning to attend! 🎉\n\nLooking forward to seeing everyone there."
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "I'd like to invite friends to this event.\n\nWho I'm inviting:\n- \n\nWhy they should come:\n"
template_3_use_for: "first_post"

```

### Issue Tracking

```yaml
template_1_id: "bug"
template_1_text: " **Bug Description:** \n\n **Steps to Reproduce:** \n1. \n2. \n3. \n\n **Expected Behavior:** \n\n **Actual Behavior:** \n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: " **Feature Request:** \n\n **Use Case:** \n\n **Proposed Solution:** \n"
template_4_use_for: "first_post"

```

### Community Engagement

```yaml
template_1_id: "question"
template_1_text: " **My Question:** \n\n **What I've Tried:** \n\n **Additional Context:** \n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "Here's what worked for me:\n\n **Solution:** \n\n **Why it works:** \n"
template_2_use_for: "all_replies"

```

## Troubleshooting

### Templates Not Applying

1. **Check URL Parameter** : Ensure the URL contains `?composer_template=X` where X matches a template ID
2. **Enable Debug Mode** : Turn on `debug_mode` in settings to see console logs
3. **Verify Template Scope** : Check if `use_for` setting matches your action (creating topic vs replying)
4. **Clear SessionStorage** : Open browser console and run: `sessionStorage.clear()`

### Auto-Open Not Working

1. **Check Setting** : Ensure `enable_auto_open_composer` is set to `true`
2. **Verify URL** : Auto-open only works when URL contains `?composer_template=X`
3. **Check Existing Topics** : Auto-open only triggers when NO topics exist with the tag combination
4. **Enable Debug Mode** : Look for 🚀 emoji logs in the console

### Wrong Template Applying

1. **Check Template IDs** : Ensure your URL parameter matches the template ID exactly (case-sensitive)
2. **Verify Priority** : If multiple templates could match, the first matching template is used
3. **Clear Session** : SessionStorage might contain old values: `sessionStorage.clear()`

### Docuss Integration Issues

1. **Update Docuss** : Ensure you have the latest versions of:
  - `dcs-client` (with composerTemplate support in HtmlBased.js)
  - `dcs-discourse-plugin` (with URL parameter generation in DcsIFrame.js.es6)

2. **Check HTML Attributes** : Verify `data-dcs-composer-template` is set correctly on triggers
3. **Inspect Network** : Check browser DevTools Network tab to see if URL parameters are being added

## Version History

### v1.0.0 (Current)

- Initial release
- Support for 6 configurable templates
- URL parameter-based template selection
- Auto-open composer for Docuss links
- SessionStorage persistence
- Debug mode for troubleshooting

## Contributing

Found a bug or have a feature request? Please open an issue on the [GitHub repository](https://github.com/focallocal/url-composer-templates).

## License

This component is open source and available under the MIT License.

## Credits

Developed by [Andy@Focallocal](https://github.com/focallocal) and works well with [Docuss](https://github.com/sylque/docuss) - a system for embedding Discourse discussions into any website.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [November 25, 2025, 6:47am UTC](https://meta.discourse.org/t/url-composer-templates/389546/2 "2025-11-25T06:47:09Z")

</div>

> [@Drew-ART](#):
>
> **Deploy your React app (fl-maps)** with the updated DCSLink components that pass the `composerTemplate` prop.

> [@Drew-ART](#):
>
> for use with [Docuss](https://github.com/sylque/docuss)

So this component must be used with that plugin installed and a React app setup? Is there any more information on this? Perhaps this should be iterated more strongly.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [November 25, 2025, 5:27pm UTC](https://meta.discourse.org/t/url-composer-templates/389546/3 "2025-11-25T17:27:33Z")

</div>

Thanks for pointing that out @NateDhaliwal

No, it just sniffs the url looking for a specific string and pre-fills the the composer with one of a few a templates when it finds that string.

The Docus plugin puts that string into urls as one of its functions, but this component will work with any string or delivery mechanism someone wants to use, so it can stand alone. I’ll update the readme to explain that.

For example, you could tell it to look for: ‘/tag/introductions’ and it would become a tag template component. Or you could use it as i am to put that template into tag-intersections, like: tags/intersection/introductions/webdevs

I’ll move the string it looks for into the admin section so it’s easier for others to modify and use without digging into the code.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [November 29, 2025, 6:39pm UTC](https://meta.discourse.org/t/url-composer-templates/389546/4 "2025-11-29T18:39:23Z")

</div>

Took a lot longer than i intended, but this component is fully working now.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [December 2, 2025, 5:18am UTC](https://meta.discourse.org/t/url-composer-templates/389546/5 "2025-12-02T05:18:04Z")

</div>

Looks good. But maybe some screen shots of settings as it looks cleaner than the copy blocks.

Very nice. I have a lot of work to do now. 😁
