@momentco-ai/moment-sdk 0.1.0-dev.4 → 0.1.1-dev.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -131,6 +131,66 @@ Programmatically create a styled trigger button:
|
|
|
131
131
|
|
|
132
132
|
The button renders with Moment's default styling (stone-900 background, subtle border, rounded corners). Override with CSS or pass a `className` option.
|
|
133
133
|
|
|
134
|
+
### Styling, fonts, and labels
|
|
135
|
+
|
|
136
|
+
You can customize trigger button appearance in a few ways:
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<style>
|
|
140
|
+
.my-calendar-btn {
|
|
141
|
+
font-family:
|
|
142
|
+
Inter,
|
|
143
|
+
system-ui,
|
|
144
|
+
-apple-system,
|
|
145
|
+
sans-serif;
|
|
146
|
+
font-size: 15px;
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
letter-spacing: 0.01em;
|
|
149
|
+
border-radius: 9999px;
|
|
150
|
+
padding: 10px 18px;
|
|
151
|
+
border: 1px solid #1e3a8a;
|
|
152
|
+
background: #1d4ed8;
|
|
153
|
+
color: #ffffff;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.my-calendar-btn:hover {
|
|
157
|
+
background: #1e40af;
|
|
158
|
+
}
|
|
159
|
+
</style>
|
|
160
|
+
|
|
161
|
+
<script>
|
|
162
|
+
const primaryBtn = createMomentButton({
|
|
163
|
+
teamSlug: 'your-team-slug',
|
|
164
|
+
externalEventId: 'event-001',
|
|
165
|
+
triggerType: 'moment',
|
|
166
|
+
label: 'Get Tickets + Calendar',
|
|
167
|
+
className: 'my-calendar-btn',
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
document.getElementById('container').appendChild(primaryBtn);
|
|
171
|
+
</script>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
You can also create plain HTML triggers and fully own styles/text:
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<button
|
|
178
|
+
class="my-calendar-btn moment-sync-trigger"
|
|
179
|
+
data-moment-team-slug="your-team-slug"
|
|
180
|
+
data-external-event-id="event-001"
|
|
181
|
+
data-moment-trigger-type="moment"
|
|
182
|
+
>
|
|
183
|
+
Add This Match to My Calendar
|
|
184
|
+
</button>
|
|
185
|
+
|
|
186
|
+
<script src="https://unpkg.com/@momentco-ai/moment-sdk"></script>
|
|
187
|
+
<script>
|
|
188
|
+
new MomentSdk();
|
|
189
|
+
</script>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
Note: these customization options apply to trigger buttons. The modal UI itself is hosted in a secure iframe and is not themed by host-page CSS.
|
|
193
|
+
|
|
134
194
|
---
|
|
135
195
|
|
|
136
196
|
## Analytics Events
|
package/package.json
CHANGED